/* Gapify.org v3: scroll-told story (gap > problem > journey > solution > proof > climax).
   Tokens from the Gapify guidelines: black, neon green #5BEB15, Lato + Tajawal. */
:root{
  --green:#5BEB15; --green-ink:#1f6b02; --pink:#FF2257; --black:#000; --ink:#0b0d0a; --grey:#666;
  --paper:#f4f5f1; --white:#fff; --line:#dfe2db; --line-d:#2a2f28;
  --ease:cubic-bezier(.16,1,.3,1);
  --max:1180px; --gut:clamp(18px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body,.site{margin:0;font-family:'Lato',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:clip}
.site[lang=ar],html[lang=ar] body{font-family:'Tajawal','Lato',system-ui,sans-serif;line-height:1.85}
img{max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;inset-inline-start:8px;top:-80px;background:#000;color:#fff;padding:10px 14px;z-index:200}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* progress + glow */
.progress{position:fixed;top:0;inset-inline:0;height:3px;background:var(--green);transform-origin:0 50%;transform:scaleX(0);z-index:120;pointer-events:none}
[dir=rtl] .progress{transform-origin:100% 50%}
.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,70%) var(--my,30%),rgba(91,235,21,.22),transparent 60%);opacity:.9}

/* header */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;background:rgba(0,0,0,.82);backdrop-filter:blur(12px);color:#fff;border-bottom:1px solid var(--line-d)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:28px;width:auto}
.brand span{font-size:26px;letter-spacing:-.5px;line-height:1;font-family:'Lato',sans-serif}
.brand b{font-weight:900}.brand i{font-style:normal;font-weight:300}
.nav{display:flex;align-items:center;gap:6px}
.nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px;text-decoration:none;font-weight:700;font-size:15px;border-radius:99px;transition:background .25s}
.nav a:hover{background:rgba(255,255,255,.12)}
.nav .lang{border:1.5px solid rgba(255,255,255,.5);padding:0 16px}
.nav .lang:hover{background:#fff;color:#000}
.nav .cta{background:var(--green);color:#000;padding:0 20px;font-weight:900}
.nav .cta:hover{background:#fff}
@media(max-width:820px){.nav .hide-sm{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:99px;font-weight:900;font-size:16px;text-decoration:none;border:2px solid var(--green);background:var(--green);color:#000;cursor:pointer;font-family:inherit;transition:background .25s,color .25s,transform .25s var(--ease)}
.btn:hover{background:#000;color:var(--green)}
.btn.ghost{background:transparent;border-color:currentColor;color:inherit}
.btn.ghost:hover{background:#fff;color:#000;border-color:#fff}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
[dir=rtl] .btn .arr{transform:scaleX(-1)}
[dir=rtl] .btn:hover .arr{transform:scaleX(-1) translateX(5px)}

/* type */
.eyebrow{font-weight:900;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:30px;height:4px;background:var(--green);border-radius:2px;flex:none}
[lang=ar] .eyebrow{letter-spacing:0;font-size:15px}
h2{font-size:clamp(34px,5.4vw,66px);line-height:1.04;letter-spacing:-.03em;margin:0 0 20px;font-weight:900;text-wrap:balance}
[lang=ar] h2{letter-spacing:0;line-height:1.3}
h3{margin:0 0 8px;line-height:1.2}
.lede{font-size:clamp(18px,2vw,22px);max-width:660px;margin:0}

/* reveal: transform only, content always present */
.rv{transform:translateY(30px);transition:transform .9s var(--ease)}
.rv.in{transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* hero */
.hero{position:relative;background:#000;color:#fff;overflow:hidden;padding:clamp(64px,10vw,120px) 0 clamp(56px,8vw,96px)}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(64px,15.5vw,210px);line-height:.84;letter-spacing:-.05em;margin:0 0 26px;font-weight:900;display:flex;flex-wrap:wrap;column-gap:.2em;row-gap:0}
[lang=ar] .hero h1{letter-spacing:0;line-height:1.15;font-size:clamp(64px,15vw,200px)}
.w{display:inline-block;overflow:hidden;padding:.04em .06em .1em;margin-inline:-.06em}
[lang=ar] .w{padding-top:.12em}
.w>span{display:block}
.js .w>span{transform:translateY(112%);animation:up 1.1s var(--ease) forwards;animation-delay:calc(.15s + var(--i)*.14s)}
.w.hl>span{color:var(--green)}
@keyframes up{to{transform:none}}
.hero .lede{color:#d5dad1;margin-bottom:34px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* gap widget: one continuous motion. --p (0 to 1) pulls the boxes together, the Gapify badge is the joint that holds them */
.gapw{--sx:1;--p:0;--q:0;--c:0;margin-top:clamp(44px,6vw,72px);border:1px solid var(--line-d);border-radius:24px;padding:clamp(20px,3vw,34px);background:rgba(255,255,255,.04);backdrop-filter:blur(4px)}
[dir=rtl] .gapw{--sx:-1}
.track{position:relative;display:flex;justify-content:space-between;height:clamp(120px,16vw,190px)}
.blk{flex:0 0 38%;min-width:0;display:flex;align-items:flex-end;padding:16px 20px;font-weight:900;font-size:clamp(13px,1.7vw,20px);line-height:1.2;border-radius:16px;box-shadow:inset 0 0 0 3px rgba(91,235,21,var(--c));will-change:transform}
.blk.a{background:#1b1f19;color:#aab0a6;transform:translateX(calc(var(--sx)*var(--p)*31%))}
.blk.b{background:#fff;color:#000;transform:translateX(calc(var(--sx)*var(--p)*-31%))}
.gapw.done .blk.a{color:#fff}
.gz{position:absolute;inset:0;pointer-events:none;z-index:3}
.wire{position:absolute;left:38%;right:38%;top:50%;height:3px;margin-top:-1.5px;background:linear-gradient(90deg,transparent,var(--green) 18%,var(--green) 82%,transparent);opacity:calc((1 - var(--p))*.9);transform:scaleX(calc(1 - var(--p)*.6))}
.badge{position:absolute;left:50%;top:50%;width:clamp(76px,10vw,112px);aspect-ratio:1;margin:calc(clamp(76px,10vw,112px)/-2) 0 0 calc(clamp(76px,10vw,112px)/-2);border-radius:50%;background:#000;border:3px solid var(--green);display:grid;place-items:center;overflow:hidden;opacity:var(--q);transform:scale(calc(.55 + var(--q)*.45));box-shadow:0 10px 30px rgba(0,0,0,.55)}
.bmark{width:64%;height:auto;max-width:none;display:block}
.gapw.done .badge{animation:seal 1.2s var(--ease)}
@keyframes seal{0%{box-shadow:0 0 0 0 rgba(91,235,21,.65),0 10px 30px rgba(0,0,0,.55)}100%{box-shadow:0 0 0 30px rgba(91,235,21,0),0 10px 30px rgba(0,0,0,.55)}}
.gctl{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:22px}
.gout{margin:0;font-weight:900;color:var(--green);min-height:1.6em;font-size:clamp(16px,2vw,20px)}

/* marquee */
.mq{background:var(--green);color:#000;overflow:hidden;white-space:nowrap;border-block:2px solid #000}
.mq-in{display:inline-flex;animation:mq 40s linear infinite}
.mq:hover .mq-in{animation-play-state:paused}
.mq span{padding:15px 30px;font-weight:900;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.mq span::after{content:"✦";margin-inline-start:60px}
[lang=ar] .mq span{letter-spacing:0;font-size:17px}
@keyframes mq{to{transform:translateX(-50%)}}
[dir=rtl] .mq-in{animation-name:mqr}
@keyframes mqr{to{transform:translateX(50%)}}

section{padding:clamp(64px,9vw,120px) 0}
.dark{background:#000;color:#fff}
.paper{background:var(--paper)}

/* chapter: problem */
.prob{background:var(--paper)}
.prob h2{max-width:900px}
.prob .lede{max-width:760px}

/* steps */
.steps{position:relative;display:grid;gap:0;margin-top:48px;counter-reset:s}
.steps::before{content:"";position:absolute;inset-block:0;inset-inline-start:23px;width:3px;background:var(--line-d)}
.steps::after{content:"";position:absolute;top:0;inset-inline-start:23px;width:3px;height:calc(var(--p,0)*100%);background:var(--green);transition:height .2s linear}
.step{display:grid;grid-template-columns:48px 1fr;gap:28px;padding-bottom:56px;opacity:.45;transition:opacity .6s}
.step:last-child{padding-bottom:0}
.step.on{opacity:1}
.step .dot{width:48px;height:48px;border-radius:50%;background:#000;border:3px solid var(--line-d);display:grid;place-items:center;font-weight:900;position:relative;z-index:1;transition:background .4s,border-color .4s,color .4s}
.step.on .dot{background:var(--green);border-color:var(--green);color:#000}
.step h3{font-size:clamp(30px,5vw,56px);font-weight:900;letter-spacing:-.03em;margin-bottom:6px}
.step p{margin:0;color:#cfd4cb;max-width:560px;font-size:19px}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid #000;margin-top:40px}
.num{padding:30px 24px 30px 0;border-inline-end:1.5px solid var(--line)}
.num+.num{padding-inline-start:24px}
.num:last-child{border-inline-end:0}
.num b{display:block;font-size:clamp(46px,7vw,92px);font-weight:900;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.num b em{font-style:normal;color:var(--green-ink)}
.num>span{display:block;margin-top:14px;font-weight:700}
.num small{display:block;color:var(--grey);margin-top:4px;font-size:14px}
@media(max-width:860px){.nums{grid-template-columns:repeat(2,1fr)}.num{border-bottom:1.5px solid var(--line);padding-inline:0 16px!important}.num:nth-child(2n){border-inline-end:0;padding-inline-start:20px!important}}

/* services */
.svc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);margin-top:44px;align-items:start}
@media(max-width:860px){.svc{grid-template-columns:1fr}}
.tabs{display:grid;gap:0;border-top:1.5px solid var(--line-d)}
.tab{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:18px 4px;border-bottom:1.5px solid var(--line-d);font-weight:900;font-size:clamp(18px,2vw,23px);line-height:1.2;transition:padding .35s var(--ease),color .3s}
.tab small{font-size:13px;color:#8d948a;letter-spacing:.1em}
.tab::after{content:"→";opacity:0;transition:opacity .3s,transform .35s var(--ease);transform:translateX(-8px)}
[dir=rtl] .tab::after{content:"←";transform:translateX(8px)}
.tab:hover,.tab[aria-selected=true]{padding-inline-start:16px;color:var(--green)}
.tab[aria-selected=true]::after,.tab:hover::after{opacity:1;transform:none}
.tab:focus-visible{outline:3px solid var(--pink);outline-offset:-3px}
.panel{background:#0e110d;border:1px solid var(--line-d);border-radius:24px;padding:clamp(24px,3.4vw,44px);min-height:100%}
.panel[hidden]{display:none}
.pmedia{position:relative;margin:0 0 26px;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#161a14}
.pmedia img,.pmedia video{width:100%;height:100%;object-fit:cover;display:block}
.pmedia img{animation:kb 14s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}

.vctl{position:absolute;inset-inline-end:12px;bottom:12px;z-index:2;width:48px;height:48px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.55);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px);transition:background .25s}
.vctl:hover{background:var(--green)}.vctl:hover svg{stroke:#000;fill:#000}
.vctl svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round}
.vctl .ic-play{display:none;fill:#fff;stroke:none}
.vctl.paused .ic-play{display:block}.vctl.paused .ic-pause{display:none}
.vctl:hover .ic-play{fill:#000}
.panel h3{font-size:clamp(26px,3.4vw,40px);font-weight:900;letter-spacing:-.02em;margin-bottom:14px}
.panel p{color:#d5dad1;font-size:18px;margin:0 0 26px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{border:1.5px solid var(--green);color:var(--green);border-radius:99px;padding:7px 16px;font-weight:700;font-size:15px;animation:chip .6s var(--ease) both;animation-delay:calc(var(--i)*.06s)}
@keyframes chip{from{transform:translateY(14px) scale(.96);opacity:0}}
.panel.fresh h3,.panel.fresh p{animation:chip .6s var(--ease) both}

/* work carousel */
.work-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.arrows{display:flex;gap:10px}
.ar-btn{width:52px;height:52px;border-radius:50%;border:2px solid #000;background:transparent;cursor:pointer;display:grid;place-items:center;transition:background .25s,color .25s}
.ar-btn:hover{background:#000;color:var(--green)}
.ar-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .ar-btn svg{transform:scaleX(-1)}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px var(--gut) 18px;margin-inline:calc(var(--gut)*-1);scrollbar-width:thin}
.case{flex:0 0 min(520px,86%);scroll-snap-align:start;background:#fff;border:2px solid #000;border-radius:24px;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:18px;transition:transform .4s var(--ease),box-shadow .4s}
.case:hover{transform:translateY(-6px);box-shadow:8px 8px 0 var(--green)}
.tag{align-self:flex-start;background:#000;color:#fff;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:6px 14px}
[lang=ar] .tag{letter-spacing:0;font-size:14px}
.case h3{font-size:clamp(24px,3vw,32px);font-weight:900;letter-spacing:-.02em}
.seg{display:flex;gap:6px;background:var(--paper);padding:5px;border-radius:99px;align-self:flex-start}
.seg button{font:inherit;font-weight:900;font-size:14px;min-height:40px;padding:0 18px;border:0;border-radius:99px;background:transparent;cursor:pointer;transition:background .25s,color .25s}
.seg button[aria-selected=true]{background:#000;color:var(--green)}
.cpanel{margin:0;min-height:140px;font-size:17px;animation:chip .5s var(--ease)}
.cpanel[hidden]{display:none}
.note{margin:26px 0 0;border-inline-start:4px solid var(--green);padding:4px 16px;color:var(--grey);max-width:700px;font-size:15px}

/* faq */
details{border-bottom:1.5px solid var(--line-d);padding:6px 0}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;font-weight:900;font-size:clamp(18px,2vw,22px)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:30px;color:var(--green);transition:transform .35s var(--ease);flex:none}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 20px;color:#d5dad1;max-width:760px;animation:chip .5s var(--ease)}

/* contact */
/* scenes */
.scene{width:100%;height:100%;display:block;background:#0e110d}
.scene .g{fill:#5BEB15}.scene .p{fill:#FF2257}.scene .w{fill:#fff}
.scene .bob{animation:sbob 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes sbob{50%{transform:translateY(-7px)}}
.scene .pulse{animation:spulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes spulse{50%{transform:scale(1.5);opacity:.6}}
.scene .dash{animation:sdash 1.4s linear infinite}
@keyframes sdash{to{stroke-dashoffset:-52}}
.scene .flag{animation:sflag 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:0 100%}
@keyframes sflag{50%{transform:skewY(-6deg)}}
.scene .beam{transform-box:fill-box;animation:sbeam 4s ease-in-out infinite alternate}
.scene .b1{transform-origin:50% 0}.scene .b2{transform-origin:50% 0;animation-delay:-2s}
@keyframes sbeam{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.scene .twinkle{animation:stw 1.6s ease-in-out infinite}
@keyframes stw{50%{opacity:.15}}
.scene .screen{animation:sscreen 3s ease-in-out infinite}
@keyframes sscreen{50%{fill:#FF2257}}
.scene .fall{animation:sfall 4s linear infinite;transform-box:fill-box}
@keyframes sfall{to{transform:translateY(400px) rotate(300deg)}}
.scene .hop{animation:shop 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes shop{50%{transform:translateY(-14px) rotate(-4deg)}}
.scene .grow{animation:sgrow 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes sgrow{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(2.1)}}
.scene .cursor{animation:scur 3.2s ease-in-out infinite}
@keyframes scur{0%,100%{transform:translate(0,0)}50%{transform:translate(48px,-34px)}}
.scene .pop{animation:spop 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:0 100%}
@keyframes spop{0%,12%{transform:scale(0)}22%,86%{transform:scale(1)}100%{transform:scale(0)}}
.scene .sun{animation:ssun 6s ease-in-out infinite alternate}
@keyframes ssun{to{transform:translateY(16px)}}
.scene .cycle{animation:scyc 6s steps(1) infinite;fill:#5BEB15}
@keyframes scyc{0%{fill:#5BEB15}33%{fill:#FF2257}66%{fill:#fff}}
.scene .car{animation:scar 7s linear infinite}
@keyframes scar{from{transform:translateX(-120px)}to{transform:translateX(660px)}}
.scene .clap{animation:sclap 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:0 100%}
@keyframes sclap{0%,55%,100%{transform:rotate(0)}70%{transform:rotate(-24deg)}}
.scene .ring{animation:sspin 5s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes sspin{to{transform:rotate(360deg)}}
.scene .rec{animation:stw 1.2s steps(1) infinite}
.scene .playp{animation:spulse 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.scene .strip{animation:sstrip 6s linear infinite}
@keyframes sstrip{to{transform:translateX(-440px)}}

/* project types by pillar */
.deliveries{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:980px){.deliveries{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.deliveries{grid-template-columns:1fr}}
.dv{background:#fff;border:2px solid #000;border-radius:22px;padding:26px;transition:transform .4s var(--ease),box-shadow .4s}
.dv:hover{transform:translateY(-6px);box-shadow:8px 8px 0 var(--green)}
.dv .sn{font-weight:900;font-size:13px;letter-spacing:.12em;color:var(--grey)}
.dv h3{font-size:clamp(20px,2vw,24px);font-weight:900;letter-spacing:-.01em;margin:6px 0 16px}
.dlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.dlist li{background:var(--paper);border:1.5px solid transparent;border-radius:99px;padding:7px 14px;font-weight:700;font-size:15px;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.dlist li:hover{background:#000;color:var(--green);transform:translateY(-2px)}
.dv.in .dlist li{animation:chip .6s var(--ease) both;animation-delay:calc(var(--i)*.07s + .2s)}

/* work by pillar (legacy) */
.scopes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:980px){.scopes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.scopes{grid-template-columns:1fr}}
.scope{background:#fff;border:2px solid #000;border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:12px;transition:transform .4s var(--ease),box-shadow .4s}
.scope:hover{transform:translateY(-6px);box-shadow:8px 8px 0 var(--green)}
.scope .sn{font-weight:900;font-size:13px;letter-spacing:.12em;color:var(--grey)}
.scope h3{font-size:clamp(20px,2vw,24px);font-weight:900;letter-spacing:-.01em;margin:0}
.scope p{margin:0;color:#222;font-size:16px;flex:1}
.stags{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.stags li{background:var(--paper);border-radius:99px;padding:4px 12px;font-size:13px;font-weight:700}
.sect-h{margin:52px 0 14px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:900}
[lang=ar] .sect-h{letter-spacing:0;font-size:17px}
.sectors{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sectors li{border:2px solid #000;border-radius:99px;padding:8px 18px;font-weight:900;font-size:15px;transition:background .25s,color .25s}
.sectors li:hover{background:#000;color:var(--green)}
.svcsec .panel{overflow:hidden}

.ct{background:var(--green);color:#000;border-radius:clamp(22px,4vw,44px);padding:clamp(28px,6vw,80px);position:relative;overflow:hidden}
.ct h2{font-size:clamp(40px,7.5vw,104px)}
.ct .lede{max-width:640px}
.ct-list{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0;border-top:2px solid #000}
.ct-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding:16px 0;border-bottom:2px solid #000;font-weight:700;font-size:clamp(18px,2.4vw,26px)}
.ct-list .k{flex:0 0 130px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:900}
[lang=ar] .ct-list .k{letter-spacing:0;font-size:15px}
.ct-list a{text-decoration:none;border-bottom:3px solid #000}
.cp{font:inherit;font-weight:900;font-size:13px;min-height:40px;padding:0 16px;border-radius:99px;border:2px solid #000;background:transparent;cursor:pointer;margin-inline-start:auto}
.cp:hover{background:#000;color:var(--green)}
.vendor{margin-top:30px;max-width:720px}
.vendor h3{font-size:20px;font-weight:900}
.vendor p{margin:0}

footer.foot{background:#000;color:#aab0a6;padding:44px 0 34px;font-size:14.5px}
footer.foot .row{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:center}
footer.foot b{color:#fff}
footer.foot a{color:#fff}
footer.foot .legal{margin-top:26px;border-top:1px solid var(--line-d);padding-top:18px;line-height:1.7}

.sticky{display:none}
@media(max-width:760px){
  .sticky{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:110;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.9);backdrop-filter:blur(8px)}
  .sticky .btn{flex:1;min-height:48px}
  .site{padding-bottom:70px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{transform:none;transition:none}
  .js .w>span{transform:none;animation:none}
  .mq-in{animation:none;flex-wrap:wrap;white-space:normal}
  .case:hover{transform:none}
  .scene *{animation:none!important}
  .gapw.done .badge{animation:none}
  .chips li,.panel.fresh h3,.panel.fresh p,.cpanel,details p,.dv.in .dlist li{animation:none}
  .glow{display:none}
}

/* v4: values, benefits, WhatsApp */
.vals{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.vals{grid-template-columns:1fr}}
.val{background:#000;color:#fff;border-radius:22px;padding:26px 26px 28px;display:flex;flex-direction:column;gap:10px;border-top:6px solid var(--green)}
.val b{font-size:clamp(28px,3.6vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--green)}
.val span{color:#d5dad1;font-size:17px}
.founded{margin:40px 0 0;font-size:clamp(26px,4vw,48px);font-weight:900;letter-spacing:-.03em;line-height:1.1}
.founded::before{content:"";display:block;width:56px;height:6px;background:var(--green);border-radius:3px;margin-bottom:18px}
.whys{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
@media(max-width:1000px){.whys{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.whys{grid-template-columns:1fr}}
.why{border:1px solid var(--line-d);border-radius:22px;padding:26px;background:#0e110d;transition:border-color .3s,transform .4s var(--ease)}
.why:hover{border-color:var(--green);transform:translateY(-5px)}
.why .wn{font-weight:900;font-size:13px;letter-spacing:.12em;color:var(--green)}
.why h3{font-size:clamp(20px,2vw,24px);font-weight:900;margin:10px 0 10px;letter-spacing:-.01em}
.why p{margin:0;color:#cfd4cb;font-size:16px}
.btn.wa{background:#25D366;border-color:#25D366;color:#000}
.btn.wa:hover{background:#000;color:#25D366;border-color:#25D366}
.btn.wa-dark{background:#000;border-color:#000;color:#fff;margin-top:6px}
.btn.wa-dark:hover{background:#25D366;border-color:#25D366;color:#000}
.wai{flex:none}
.more{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;background:#fff;border:2px solid #000;border-radius:22px;padding:18px 22px}
.more p{margin:0;font-weight:900;font-size:clamp(18px,2vw,22px)}
.ct-cta{margin:30px 0 0}
.wafab{position:fixed;inset-inline-end:20px;bottom:20px;z-index:115;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 20px;border-radius:99px;background:#25D366;color:#000;font-weight:900;font-size:15px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .3s var(--ease),box-shadow .3s}
.wafab:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,211,102,.45)}
.wafab span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .4s var(--ease)}
.wafab:hover span,.wafab:focus-visible span{max-width:200px}
@media(max-width:760px){.wafab{display:none}.sticky .btn.wa{flex:0 0 56px;padding:0}}
@media(max-width:760px){.sticky{gap:10px}}

/* v5: SME structure */
.hnote{margin:16px 0 0;color:#aab0a6;font-size:15px;font-weight:700}
.tab span{display:flex;flex-direction:column;gap:2px}
.tab span em{font-style:normal;font-weight:400;font-size:14px;color:#9aa196;letter-spacing:0}
.tab:hover span em,.tab[aria-selected=true] span em{color:#cfd4cb}
.pask{margin:24px 0 0}
.howsec{padding-top:0}
.stories{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:40px}
@media(max-width:760px){.stories{grid-template-columns:1fr}}
.stories .case{flex:none}
.faq details{border-bottom-color:#cfd3ca}
.faq summary{color:#000}
.faq summary::after{color:var(--green-ink)}
.faq details p{color:#2b2f29}
.ct{padding:clamp(24px,5vw,64px)}
.ct-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:940px){.ct-grid{grid-template-columns:1fr}}
.ct h2{font-size:clamp(36px,5.6vw,76px)}
.resp{margin:18px 0 0;font-weight:900;font-size:17px;max-width:560px}
.paths-h{margin:26px 0 10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:900}
[lang=ar] .paths-h{letter-spacing:0;font-size:15px}
.paths{display:flex;flex-wrap:wrap;gap:10px}
.paths .btn{min-height:48px;padding:0 20px;font-size:15px}
.btn.ink{background:transparent;border:2px solid #000;color:#000}
.btn.ink:hover{background:#000;color:var(--green)}
.ct .ct-list{margin-top:30px}
.ct .ct-list li{font-size:clamp(16px,1.9vw,21px)}
.pform{background:#fff;color:#000;border-radius:24px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.pform h3{font-size:clamp(24px,2.6vw,30px);font-weight:900;margin:0}
.pform .fp{margin:-6px 0 4px;color:#444}
.fld{display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:0;min-width:0}
.fld label,.fld legend{font-weight:900;font-size:14px;padding:0}
.fld input,.fld select,.fld textarea{font:inherit;font-size:16px;min-height:48px;padding:10px 14px;border:2px solid #cfd3ca;border-radius:12px;background:#fff;color:#000;width:100%;transition:border-color .2s,box-shadow .2s}
.fld textarea{resize:vertical;min-height:96px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:#000;box-shadow:0 0 0 4px rgba(91,235,21,.5)}
.fld.bad input,.fld.bad select{border-color:var(--pink)}
.ferr{color:#c4163f;font-weight:700;font-size:14px}
.hint{color:#666;font-size:13.5px}
.mths{display:flex;flex-wrap:wrap;gap:8px}
.mth{position:relative;cursor:pointer}
.mth input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.mth span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid #cfd3ca;border-radius:99px;font-weight:700;font-size:15px;transition:background .2s,color .2s,border-color .2s}
.mth input:checked+span{background:#000;color:var(--green);border-color:#000}
.mth input:focus-visible+span{outline:3px solid var(--pink);outline-offset:2px}
.btn.sub{align-self:flex-start;margin-top:4px}
.btn.sub[disabled]{opacity:.6;cursor:progress}
.fok{background:var(--paper);border-left:6px solid var(--green);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
[dir=rtl] .fok{border-left:0;border-right:6px solid var(--green)}
.fok b{font-size:18px}
.fok em{font-style:normal;color:#666;font-size:13.5px}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:#000;color:#fff;padding:12px 20px;border-radius:99px;font-weight:700;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:90vw;text-align:center}

.static *{animation:none!important}

/* v5.3 */
.whys{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.whys{grid-template-columns:1fr}}
.cmedia{margin:-4px 0 0;border-radius:16px;overflow:hidden;aspect-ratio:16/8;background:#0e110d}
.cmedia .scene{width:100%;height:100%}
.scene .grow2{transform-box:fill-box;transform-origin:0 50%;animation:sg2 5s ease-in-out infinite}
@keyframes sg2{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.stories .case{gap:16px}

/* v5.4 spacing fixes */
.panel .pask{margin:28px 0 0}
.panel .chips{margin-bottom:0}
.brand-ar{height:34px;width:auto;display:block}
.pform .fp{margin:-4px 0 6px}

.scene .cur{animation:scur2 6s ease-in-out infinite;transform-box:fill-box}
.scene .cur.l{transform-origin:0 50%}.scene .cur.r{transform-origin:100% 50%}
@keyframes scur2{0%,12%{transform:scaleX(1)}38%,78%{transform:scaleX(.08)}100%{transform:scaleX(1)}}
.stories{grid-template-columns:repeat(2,1fr)}
.scene .cur{transform:scaleX(.12)}
@media(max-width:760px){.stories{grid-template-columns:1fr}}

/* brand band: logos only, never any description of work */
.brandband{background:#fff;border-bottom:1.5px solid var(--line);padding:30px 0}
.bb-k{margin:0 0 18px;text-align:center;font-weight:900;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
[lang=ar] .bb-k{letter-spacing:0;font-size:15px}
.bb-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:20px 54px;justify-content:center;align-items:center}
.bb-list li{display:flex;align-items:center}
.bl{height:34px;width:auto;max-width:200px;filter:brightness(0);opacity:.55;transition:opacity .3s,transform .3s var(--ease)}
.bl.tall{height:52px}
.bb-list li:hover .bl{opacity:1;transform:translateY(-2px)}
@media(max-width:620px){.bb-list{gap:18px 34px}.bl{height:26px}.bl.tall{height:40px}}

.bl-photo{display:inline-flex;align-items:center;gap:12px;opacity:.6;transition:opacity .3s}
.bl-photo img{width:48px;height:48px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.bl-photo b{font-weight:900;font-size:22px;letter-spacing:-.02em;color:#222}
.bb-list li:hover .bl-photo{opacity:1}
@media(max-width:620px){.bl-photo img{width:36px;height:36px}.bl-photo b{font-size:17px}}

/* phones: hero animation stacks vertically, service tabs become a pill row so the panel sits right below */
@media(max-width:640px){
  .track{flex-direction:column;height:auto;gap:0;align-items:stretch;justify-content:flex-start;min-height:250px}
  .blk{flex:0 0 96px;width:100%;padding:14px 18px;font-size:15px}
  .blk.a{align-items:flex-start;transform:translateY(calc(var(--p)*34px))}
  .blk.b{align-items:flex-end;margin-top:58px;transform:translateY(calc(var(--p)*-34px))}
  .wire{left:50%;right:auto;top:96px;bottom:auto;width:3px;height:58px;margin:0 0 0 -1.5px;background:linear-gradient(180deg,transparent,var(--green) 18%,var(--green) 82%,transparent);transform:scaleY(calc(1 - var(--p)*.6))}
  .badge{top:50%}
}
@media(max-width:860px){
  .tabs{display:flex;gap:8px;overflow-x:auto;border-top:0;padding:2px 2px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .tab{flex:0 0 auto;display:block;grid-template-columns:none;padding:11px 18px;border:1.5px solid var(--line-d);border-radius:99px;font-size:15px;white-space:nowrap;scroll-snap-align:start}
  .tab small,.tab span em{display:none}
  .tab:hover,.tab[aria-selected=true]{padding-inline-start:18px}
  .tab::after{display:none}
  .tab[aria-selected=true]{background:var(--green);border-color:var(--green);color:#000}
  .tab:hover{color:var(--green)}.tab[aria-selected=true]:hover{color:#000}
}
.nav a{white-space:nowrap}
@media(max-width:640px){
  .track{margin-bottom:-30px}
  .nav{gap:4px}.nav .cta{padding:0 14px}.nav .lang{padding:0 12px}
  .brand-ar{height:24px}
  .bar .wrap{gap:8px}
}
@media(max-width:620px){.bl{height:20px}.bl.tall{height:32px}.bb-list{gap:14px 26px}}

.bl.tile{height:58px;filter:grayscale(1) contrast(1.05);opacity:.7;border-radius:10px}
.bb-list li:hover .bl.tile{opacity:1}
@media(max-width:620px){.bl.tile{height:42px}}

/* v7 journey line: Your brand today -> Set up -> Plan -> Launch -> Grow -> Your market tomorrow; the Gapify badge travels it */
.gapw{--dx:1}
[dir=rtl] .gapw{--dx:-1}
.jr{position:relative;height:170px;margin:6px 6px 0}
.jr-line{position:absolute;inset-inline:11px;top:50px;height:4px;background:#2a2f28;border-radius:2px}
.jr-fill{position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--p)*100%);background:var(--green);border-radius:2px;box-shadow:0 0 14px rgba(91,235,21,.6)}
.jr-list{list-style:none;margin:0;padding:0}
.jr-n{position:absolute;top:0;inset-inline-start:calc(11px + (100% - 22px)*var(--at));width:170px;margin-inline-start:-85px;text-align:center}
.jr-n.end.a{inset-inline-start:0;margin-inline-start:0;text-align:start}
.jr-n.end.b{inset-inline-start:auto;inset-inline-end:0;margin-inline-start:0;text-align:end}
.jr-n .dot{display:block;width:22px;height:22px;border-radius:50%;background:#000;border:3px solid #3a4137;margin:40px auto 14px;transition:background .4s,border-color .4s,box-shadow .4s}
.jr-n.end.a .dot{margin-inline:0 auto}.jr-n.end.b .dot{margin-inline:auto 0}
.jr-n b{display:block;font-weight:900;font-size:clamp(15px,1.6vw,19px);line-height:1.2;color:#8d948a;transition:color .4s}
.jr-n span{display:block;font-size:13px;line-height:1.35;color:#6f766c;margin-top:3px;transition:color .4s}
.jr-n.on .dot{background:var(--green);border-color:var(--green);box-shadow:0 0 0 6px rgba(91,235,21,.18)}
.jr-n.on b{color:#fff}.jr-n.on span{color:#cfd4cb}
.gapw.done .jr-n.end.b .dot{animation:seal 1.2s var(--ease)}
.jr-badge{position:absolute;top:52px;inset-inline-start:calc(11px + (100% - 22px)*var(--p));width:clamp(60px,7vw,76px);aspect-ratio:1;margin-top:calc(clamp(60px,7vw,76px)/-2);margin-inline-start:calc(clamp(60px,7vw,76px)/-2 * var(--dx));border-radius:50%;background:#000;border:3px solid var(--green);display:grid;place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.6),0 0 0 6px rgba(91,235,21,.12);z-index:3}
[dir=rtl] .jr-badge{margin-inline-start:calc(clamp(60px,7vw,76px)/2)}
.jr-badge .bmark{width:62%;height:auto;max-width:none;display:block;position:static;opacity:1;transform:none}
@media(max-width:640px){
  .jr{height:auto;min-height:0;margin:14px 4px 6px;padding:8px 0}
  .jr-list{display:flex;flex-direction:column;gap:30px}
  .jr-line{inset-inline:auto;inset-inline-start:21px;top:19px;bottom:19px;width:4px;height:auto}
  .jr-fill{inset-block:auto;top:0;inset-inline-start:0;width:100%;height:calc(var(--p)*100%)}
  .jr-n,.jr-n.end.a,.jr-n.end.b{position:static;display:grid;grid-template-columns:44px 1fr;align-items:center;gap:0 14px;width:auto;margin:0;text-align:start}
  .jr-n .dot,.jr-n.end.a .dot,.jr-n.end.b .dot{margin:0 0 0 11px;grid-row:1/3;align-self:center}
  [dir=rtl] .jr-n .dot{margin:0 11px 0 0}
  .jr-n b{grid-column:2}.jr-n span{grid-column:2;margin-top:0}
  .jr-n.end b{font-size:17px}
  .jr-badge{inset-inline-start:21px;top:calc(19px + (100% - 38px)*var(--p));margin-inline-start:-30px;margin-top:-30px}
  [dir=rtl] .jr-badge{margin-inline-start:30px}
}
@media(prefers-reduced-motion:reduce){.gapw.done .jr-n.end.b .dot{animation:none}}

/* v7.1 spacing: keep the travelling badge clear of the labels */
.jr{height:184px}
.jr-n .dot{margin:40px auto 32px}
.jr-n.end.a .dot{margin-inline:0 auto}.jr-n.end.b .dot{margin-inline:auto 0}
@media(max-width:640px){
  .jr{height:auto}
  .jr-line{inset-inline-start:28px}
  .jr-n,.jr-n.end.a,.jr-n.end.b{grid-template-columns:62px 1fr}
  .jr-n .dot,.jr-n.end.a .dot,.jr-n.end.b .dot{margin:0 0 0 19px}
  [dir=rtl] .jr-n .dot{margin:0 19px 0 0}
  .jr-badge{inset-inline-start:30px;margin-inline-start:-30px}
  [dir=rtl] .jr-badge{margin-inline-start:30px}
}

/* intro: the Gapify mark forms from nothing, then the wordmark, then the site is revealed */
.intro{position:fixed;inset:0;z-index:400;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;animation:introOut .8s ease 3.1s forwards;cursor:pointer}
@keyframes introOut{to{opacity:0;visibility:hidden}}
.no-intro .intro,.intro.skip{display:none}
.intro-in{display:flex;align-items:center;gap:clamp(14px,3vw,30px)}
.intro-mark{width:clamp(130px,24vw,270px);height:auto;overflow:visible;animation:glowIn 1.2s ease 1.3s both}
@keyframes glowIn{50%{filter:drop-shadow(0 0 28px rgba(91,235,21,.7))}100%{filter:drop-shadow(0 0 0 rgba(91,235,21,0))}}
.intro .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:introdraw 1.4s cubic-bezier(.65,0,.35,1) .25s forwards}
@keyframes introdraw{to{stroke-dashoffset:0}}
.intro-word{font-family:'Lato',sans-serif;font-size:clamp(54px,10vw,112px);line-height:1;color:#fff;letter-spacing:-.02em;display:flex}
.intro-word b,.intro-word i{display:flex;font-style:normal}
.intro-word b{font-weight:900}.intro-word i{font-weight:300}
.intro-word span{opacity:0;transform:translateY(.5em);animation:introletter .7s var(--ease) forwards;animation-delay:calc(1.15s + var(--k)*.09s)}
@keyframes introletter{to{opacity:1;transform:none}}
.intro-tag{margin:0;color:#aab0a6;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(11px,1.6vw,14px);opacity:0;transform:translateY(8px);animation:introtag .8s ease 2s forwards}
@keyframes introtag{to{opacity:1;transform:none}}
html:not(.no-intro) .js .w>span{animation-delay:calc(3s + .15s + var(--i)*.14s)}
@media(max-width:560px){.intro-in{flex-direction:column;gap:14px}.intro-mark{width:170px}.intro-word{font-size:68px}}
@media(max-width:760px){}

/* v8: journey lives in "How it works"; second brand colour (pink-red) joins the green */
.jr-wrap{--p:1;--dx:1;margin-top:34px}
[dir=rtl] .jr-wrap{--dx:-1}
.jr-wrap.done .jr-n.end.b .dot{animation:seal 1.2s var(--ease)}
.jr-wrap.how .jr{height:236px}
.jr-wrap.how .jr-n{width:236px;margin-inline-start:-118px}
.jr-wrap.how .jr-n.end.a,.jr-wrap.how .jr-n.end.b{margin-inline-start:0}
.jr-wrap.how .jr-n b{font-size:clamp(18px,2vw,24px)}
.jr-wrap.how .jr-n span{font-size:15px;color:#9aa196;line-height:1.45;margin-top:6px}
.jr-wrap.how .jr-n.on span{color:#d5dad1}
.jr-fill{background:linear-gradient(90deg,var(--green),var(--pink))}
.jr-badge{border-color:var(--pink);box-shadow:0 8px 26px rgba(0,0,0,.6),0 0 0 6px rgba(255,34,87,.16)}
.jr-n.end.b.on .dot{background:var(--pink);border-color:var(--pink);box-shadow:0 0 0 6px rgba(255,34,87,.2)}
@media(max-width:640px){
  .jr-wrap.how .jr{height:auto}
  .jr-wrap.how .jr-n,.jr-wrap.how .jr-n.end.a,.jr-wrap.how .jr-n.end.b{width:auto;margin:0}
  .jr-fill{background:linear-gradient(180deg,var(--green),var(--pink))}
}
.hero::before{content:"";position:absolute;left:-140px;bottom:-180px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,34,87,.17),transparent 66%);pointer-events:none}
.eyebrow::before{background:var(--pink)}
.hero .eyebrow::before{background:var(--green)}
.founded::before{background:var(--pink)}
.val:nth-child(2){border-top-color:var(--pink)}
.val:nth-child(2) b{color:var(--pink)}
.val:nth-child(3){border-top-color:#fff}
.val:nth-child(3) b{color:#fff}
.why .wn{color:var(--pink)}
.faq summary::after,.dark details summary::after{color:var(--pink)}
.case:nth-child(even):hover{box-shadow:8px 8px 0 var(--pink)}
.seg button[aria-selected=true]{color:var(--green)}
.tag{background:#000}
.stories .case:nth-child(even) .tag{background:var(--pink)}
.mq span::after{color:#000}
.hnote{color:#c7ccc3}

/* header logo stays hidden until the intro logo lands on it (CSS fallback shows it after 4.6s if scripts fail) */
html:not(.no-intro) .bar .brand{opacity:0;animation:brandshow .01s linear 4.6s forwards}
@keyframes brandshow{to{opacity:1}}
html.intro-done .bar .brand{opacity:1;animation:none}

/* v9: intro logo is built from the same box as the header logo (62x28 mark, 26px Lato wordmark, 10px gap) and only scaled up,
   so when it flies home the final scale is exactly 1 and it lands pixel for pixel */
.intro{--S:4.5}
@media(max-width:899px){.intro{--S:3.2}}
@media(max-width:599px){.intro{--S:2}}
.intro-in{display:flex;flex-direction:row;align-items:center;gap:10px;transform:scale(var(--S));transform-origin:50% 50%}
.intro-mark{width:62.2222px;height:28px;overflow:visible}
.intro-word{font-family:'Lato',sans-serif;font-size:26px;letter-spacing:-.5px;line-height:1;color:#fff;display:block;white-space:nowrap;
  clip-path:inset(-30% 100% -30% -5%);animation:wordwipe .9s cubic-bezier(.65,0,.35,1) 1.15s forwards}
.intro-word b,.intro-word i{display:inline;font-style:normal}
.intro-word b{font-weight:900}.intro-word i{font-weight:300}
@keyframes wordwipe{to{clip-path:inset(-30% -5% -30% -5%)}}
@media(max-width:560px){.intro-in{flex-direction:row;gap:10px}.intro-mark{width:62.2222px}.intro-word{font-size:26px}}
@media(prefers-reduced-motion:reduce){.intro-word{clip-path:none;animation:none}}

/* v9.1: tagline sits below the scaled logo (transforms do not move layout, so place it from the scale), no leftover filter after the glow */
.intro{display:flex;flex-direction:row;align-items:center;justify-content:center}
.intro-in{position:relative;margin:0}
.intro-tag{position:absolute;left:0;right:0;top:calc(50% + var(--S) * 14px + 34px);text-align:center}
.intro-mark{animation:glowIn 1.2s ease 1.3s backwards}

/* v9.2: the exact logo image (no mask, so curves are never cut by a reveal edge) forms from nothing: it blurs in and settles */
.intro-mark{display:block;width:62.2222px;height:28px;animation:introform 1.25s cubic-bezier(.2,.8,.2,1) .3s backwards}
@keyframes introform{0%{opacity:0;transform:scale(.45);filter:blur(7px)}55%{opacity:1;filter:blur(1.5px)}100%{opacity:1;transform:none;filter:blur(0)}}
.intro-in{position:relative}
.intro-in::before{content:"";position:absolute;left:-12%;right:-12%;top:-120%;bottom:-120%;background:radial-gradient(closest-side,rgba(91,235,21,.34),rgba(91,235,21,0));opacity:0;pointer-events:none;animation:bloom 1.9s ease .35s backwards}
@keyframes bloom{0%{opacity:0;transform:scale(.4)}45%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
.intro-word{animation-delay:1.05s}
@media(prefers-reduced-motion:reduce){.intro-mark,.intro-in::before{animation:none}}

.intro-in::before{left:-18%;right:auto;width:80%}

/* contact: one centred column, heading then the form */
.ct{text-align:center;padding:clamp(34px,6vw,84px) clamp(18px,4vw,64px)}
.ct-center{max-width:720px;margin:0 auto}
.ct .eyebrow{justify-content:center}
.ct .eyebrow::before{background:#000}
.ct h2{font-size:clamp(38px,6vw,84px);margin-bottom:clamp(26px,4vw,44px);text-wrap:balance}
.ct .pform{text-align:start;margin:0 auto}

/* proposal / portfolio switch inside the form */
.fmode{display:flex;gap:6px;background:var(--paper);padding:5px;border-radius:99px;align-self:flex-start}
.fmode button{font:inherit;font-weight:900;font-size:14px;min-height:42px;padding:0 18px;border:0;border-radius:99px;background:transparent;color:#000;cursor:pointer;transition:background .25s,color .25s}
.fmode button[aria-selected=true]{background:#000;color:var(--green)}
.pform[data-mode=portfolio] .fld-need{display:none}

/* hero skyline canvas sits behind the copy, along the bottom */
.sky{position:absolute;left:0;right:0;bottom:0;width:100%;z-index:1;pointer-events:none;display:block}
.hero .glow{z-index:0}

.sky-tip{position:absolute;z-index:3;transform:translate(-100%,-50%);pointer-events:none;white-space:nowrap;background:rgba(0,0,0,.78);border:1.5px solid var(--green);color:#fff;border-radius:99px;padding:6px 14px;font-weight:900;font-size:13px;letter-spacing:.02em;opacity:0;transition:opacity .35s,top .45s var(--ease);backdrop-filter:blur(4px)}
@media(max-width:700px){.sky-tip{font-size:11px;padding:4px 10px}}
@media(pointer:fine){.hero{cursor:default}}

/* hero buttons stay legible over the landmarks */
.hero .btn.ghost{background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.hero .btn.ghost:hover{background:#fff}

/* portfolio mode: just email (required) and WhatsApp (optional) */
.fld-pemail,.fld-pwa{display:none}
.pform[data-mode=portfolio] .fld-pemail,.pform[data-mode=portfolio] .fld-pwa{display:flex}
.pform[data-mode=portfolio] .fld-method,.pform[data-mode=portfolio] .fld-contact,.pform[data-mode=portfolio] .fld-msg,.pform[data-mode=portfolio] .fld-need{display:none}

/* service pages + learn-more links */
.panel .svc-more{display:flex;width:fit-content;max-width:100%;align-items:center;gap:6px;min-height:44px;margin:14px 0 0;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--green)}
.panel .svc-more:hover{color:var(--green)}
.sp-hero{padding:clamp(48px,7vw,88px) 0 clamp(48px,7vw,80px)}
.sp-hero h1{font-size:clamp(34px,6vw,76px);line-height:1.02;letter-spacing:-.035em;margin:0 0 22px;font-weight:900;max-width:960px;text-wrap:balance;display:block}
.crumbs{font-size:14px;color:#aab0a6;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{color:#fff;text-decoration:none}.crumbs a:hover{text-decoration:underline}
.sp-sec{padding:clamp(52px,7vw,96px) 0}
.sp-sec h2{max-width:820px}
.sp-grid{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.sp-grid li{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}
.sp-grid b{display:block;font-size:19px;margin-bottom:8px}
.sp-grid span{color:#2b2f29}
.sp-steps{list-style:none;counter-reset:s;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.sp-steps li{counter-increment:s;border:1px solid var(--line-d);border-radius:20px;padding:24px;background:#0e110d}
.sp-steps li::before{content:"0" counter(s);display:block;font-weight:900;color:var(--green);margin-bottom:10px}
.sp-steps b{display:block;font-size:19px;margin-bottom:8px}
.sp-steps span{color:#d5dad1}
.sp-links{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sp-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:99px;font-weight:700;text-decoration:none}
.sp-links a:hover{background:#000;color:var(--green)}
.spage .faq details p{color:#2b2f29}
.sp-kw{margin:28px 0 0;max-width:860px;color:#2b2f29;font-size:16px}.sp-kw b{color:#000}