/* cards v3: How we work (in-card) + Services (link) */
.c3{--c3a:#b07d1e}
#how.c3{background:#f7f4ee!important;color:#0f1d15}
#services.c3{background:#1f3a2b!important;color:#f7f4ee;--c3a:#e8b04a}
.c3 .c3-in{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,3vh,30px);padding:clamp(84px,12vh,120px) clamp(20px,7vw,120px) clamp(28px,6vh,72px);max-width:1440px;margin:0 auto}
html[dir=rtl] .c3 .c3-in[lang=en],html:not([dir=rtl]) .c3 .c3-in[lang=ar]{display:none}
.c3-kick{font:600 12px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--c3a);margin:0}
.c3 [lang=ar] .c3-kick{font-family:Cairo,sans-serif;letter-spacing:0;font-size:14px}
.c3-ttl{font-family:Marcellus,serif;font-weight:400;font-size:clamp(40px,8.2vw,128px);line-height:1.04;letter-spacing:-.02em;margin:0;color:inherit;max-width:15ch;text-wrap:balance}
.c3 [lang=ar] .c3-ttl{font-family:'El Messiri',ElMessiri,serif;letter-spacing:0;line-height:1.3;font-weight:600}
.c3-ttl .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .03em .1em;margin-bottom:-.1em}
.c3-ttl .w>span{display:inline-block}
.c3-ttl em{font-style:normal;color:var(--c3a)}
.c3-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.c3-steps li{border-top:1.5px solid rgba(31,58,43,.25);padding-top:14px}
.c3-steps b{display:block;font:400 30px/1 Marcellus,serif;color:var(--c3a);margin-bottom:10px}
.c3 [lang=ar] .c3-steps b{font-family:'El Messiri',ElMessiri,serif}
.c3-steps h3{margin:0 0 6px;font-size:17px;color:#0f1d15}.c3-steps p{margin:0;font-size:14.5px;line-height:1.5;color:#5b5b66}
.c3-lead{font-size:clamp(16px,1.5vw,21px);line-height:1.55;max-width:46ch;margin:0;color:#dfe6dd}
.c3-btn{align-self:flex-start;display:inline-flex;gap:10px;align-items:center;background:#e8b04a;color:#0f1d15;font-weight:700;font-size:16px;text-decoration:none;padding:15px 26px;border-radius:999px}
.c3-btn:hover{background:#f0c165}
@media (max-width:700px){.c3-steps{grid-template-columns:1fr 1fr;gap:18px 14px}.c3-steps p{font-size:13.5px}.c3-steps h3{font-size:15px}.c3-steps b{font-size:24px;margin-bottom:6px}}
@media (max-height:620px){.c3 .c3-in{gap:12px;padding-top:72px}.c3-ttl{font-size:clamp(34px,7vw,64px)}.c3-steps p{font-size:12.5px}}
/* reveal: only when JS armed it and motion allowed */
.c3-arm .c3-ttl .w>span{transform:translateY(108%) scale(.95);opacity:0;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .6s ease;transition-delay:calc(var(--i)*70ms)}
.c3-arm .c3-steps,.c3-arm .c3-lead,.c3-arm .c3-btn{opacity:0;transform:translateY(16px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .55s,transform 1s cubic-bezier(.16,1,.3,1) .55s}
.c3-arm.c3-on .c3-ttl .w>span,.c3-arm.c3-on .c3-steps,.c3-arm.c3-on .c3-lead,.c3-arm.c3-on .c3-btn{transform:none;opacity:1}
/* beat older #how/#services/.stk rules */
#how .c3-ttl,#services .c3-ttl{font-size:clamp(40px,8.2vw,128px)!important;color:#0f1d15!important;margin:0!important;max-width:15ch!important}
#services .c3-ttl{color:#f7f4ee!important}
#how .c3-ttl em,#services .c3-ttl em{color:var(--c3a)!important}
#how .c3-kick,#services .c3-kick{color:var(--c3a)!important}
#how .c3-steps h3{color:#0f1d15!important}#how .c3-steps p{color:#5b5b66!important}
@media (max-height:620px){#how .c3-ttl,#services .c3-ttl{font-size:clamp(34px,7vw,60px)!important}}
/* v3: content starts at the same offset as Why Zeyn (eyebrow 104px below section top); natural title wrap; mask room for diacritics */
.c3 .c3-in{justify-content:flex-start!important;padding-top:45px!important}@media (min-width:641px){.c3 .c3-in{padding-top:14px!important}}
#how .c3-ttl,#services .c3-ttl{max-width:none!important;text-wrap:pretty}
.c3-ttl .w{padding:.28em .04em .16em!important;margin:-.28em 0 -.16em!important}
.c3 [lang=ar] .c3-ttl .w{padding-top:.42em!important;margin-top:-.42em!important}
.c3-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.c3-list li{border-top:1.5px solid rgba(247,244,238,.22);padding-top:14px}
#services .c3-list h3{margin:0 0 6px;font-size:17px;color:#f7f4ee}#services .c3-list p{margin:0;font-size:14.5px;line-height:1.5;color:#c9d4cb}
.c3-arm .c3-list{opacity:0;transform:translateY(16px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .6s,transform 1s cubic-bezier(.16,1,.3,1) .6s}
.c3-arm.c3-on .c3-list{opacity:1;transform:none}
.c3-arm .c3-ttl .w>span{transition-delay:calc(var(--i)*80ms + 60ms)}
@media (max-width:700px){.c3 .c3-in{padding-top:45px!important}@media (min-width:641px){.c3 .c3-in{padding-top:14px!important}}.c3-list{grid-template-columns:1fr 1fr;gap:16px 14px}#services .c3-list p{font-size:13px}#services .c3-list h3{font-size:15px}}
/* v5 (laptop): smaller titles, natural word spacing, natural wrap */
#how .c3-ttl,#services .c3-ttl{font-size:clamp(36px,4.6vw,72px)!important;line-height:1.12!important;word-spacing:normal;text-wrap:wrap}
.c3 [lang=ar] .c3-ttl{line-height:1.45!important}
.c3-ttl .w{padding:.3em 0 .18em!important;margin:-.3em 0 -.18em!important}
.c3 [lang=ar] .c3-ttl .w{padding-top:.45em!important;margin-top:-.45em!important}
@media (min-width:641px){#problem.stk-why{min-height:calc(100vh + 12px);box-sizing:border-box;padding-bottom:24px!important}}
.stk-m #problem.stk-why{top:0!important}
/* v7: richer How / Services */
.c3-time{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:600;color:#7a5a14;background:rgba(232,176,74,.18);border-radius:99px;padding:4px 10px}
.c3-promise{display:flex;gap:12px;align-items:center;margin:4px 0 0;padding:14px 18px;border-radius:16px;background:#fff;border:1px solid rgba(31,58,43,.12);max-width:760px;font-size:15px;line-height:1.5;color:#3b4a40}
.c3-promise b{color:#0f1d15}.c3-promise .ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#1f3a2b;color:#e8b04a}.c3-promise .ic svg{width:18px;height:18px}
.c3-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.c3-g{border-top:1.5px solid rgba(247,244,238,.22);padding-top:14px}
#services .c3-g h3{margin:0 0 4px;font-size:18px;color:#e8b04a}#services .c3-g p{margin:0 0 10px;font-size:14px;color:#c9d4cb;line-height:1.45}
.c3-g ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.c3-g li{font-size:13px;color:#f7f4ee;border:1px solid rgba(247,244,238,.25);border-radius:99px;padding:5px 11px}
.c3-arm .c3-groups,.c3-arm .c3-promise{opacity:0;transform:translateY(16px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .65s,transform 1s cubic-bezier(.16,1,.3,1) .65s}
.c3-arm.c3-on .c3-groups,.c3-arm.c3-on .c3-promise{opacity:1;transform:none}
/* reset (card left): hide quickly, no stagger */
.c3-arm:not(.c3-on) .c3-ttl .w>span,.c3-arm:not(.c3-on) .c3-steps,.c3-arm:not(.c3-on) .c3-lead,.c3-arm:not(.c3-on) .c3-btn,.c3-arm:not(.c3-on) .c3-groups,.c3-arm:not(.c3-on) .c3-promise{transition-duration:.25s;transition-delay:0s}
@media (max-width:700px){.c3-groups{grid-template-columns:1fr;gap:12px}.c3-g p{display:none}.c3-promise{font-size:13px;padding:10px 12px}.c3-time{font-size:11.5px;margin-top:6px}}
/* Work card */
#work .eyebrow{color:#fff!important}
#work .wbox{position:relative}
#work .wbox>.wside{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(15,29,21,.55);color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#work .wbox>.wside:hover{background:rgba(15,29,21,.8)}#work .wbox>.wside:focus-visible{outline:2px solid #e8b04a;outline-offset:2px}
#work .wbox>.wside[disabled]{opacity:.35;cursor:default}
#work .wbox>.wprev{inset-inline-start:-24px}#work .wbox>.wnext{inset-inline-end:-24px}
#work .wnav{display:none!important}
#work .wcta{margin-top:clamp(12px,2vh,20px)!important}
@media (max-width:700px){#work .wbox>.wside{width:38px;height:38px;font-size:16px}#work .wbox>.wprev{inset-inline-start:-8px}#work .wbox>.wnext{inset-inline-end:-8px}}
@media (min-width:701px){#work .wtrack .pinfo{padding-inline-end:30px}}
@media (max-width:700px){#work .wbox>.wside{top:var(--wmock,25%)}}
@media (min-width:641px){#zh{top:22px}}
/* Work + Pricing titles: same word rise */
h2.wr .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.3em 0 .18em;margin:-.3em 0 -.18em}
[lang=ar] h2.wr .w,[dir=rtl] h2.wr .w{padding-top:.45em;margin-top:-.45em}
h2.wr .w>span{display:inline-block}
.c3-arm h2.wr .w>span{transform:translateY(108%) scale(.95);opacity:0;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .6s ease;transition-delay:calc(var(--i)*80ms + 60ms)}
.c3-arm.c3-on h2.wr .w>span{transform:none;opacity:1}
.c3-arm:not(.c3-on) h2.wr .w>span{transition-duration:.25s;transition-delay:0s}
/* header moved down 22px on laptop: keep header-to-content gap */
@media (min-width:641px){html.stk-on .stk{padding-top:max(10px,calc(var(--hh,72px) + 32px - var(--so,0px)))!important}}
/* v9 ---- Work title like the other cards */
html[dir=rtl] .c3-wt[lang=en],html:not([dir=rtl]) .c3-wt[lang=ar]{display:none}
#work .c3-ttl{font-family:Marcellus,serif;font-weight:400;font-size:clamp(36px,4.6vw,72px)!important;line-height:1.12!important;letter-spacing:-.02em;margin:0 0 6px!important;color:#fff!important;max-width:none!important}
#work .c3-ttl[lang=ar]{font-family:'El Messiri',ElMessiri,serif;letter-spacing:0;line-height:1.45!important;font-weight:600}
#work .c3-ttl em{font-style:normal;color:#1f3a2b!important}
/* whole-content reveal for Work + Pricing */
.c3-arm#work .lead,.c3-arm#work .wbox,.c3-arm .c3-pk,.c3-arm .c3-note{opacity:0;transform:translateY(16px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .55s,transform 1s cubic-bezier(.16,1,.3,1) .55s}
.c3-arm#work .eyebrow{opacity:0;transition:opacity .8s ease .1s}
.c3-arm.c3-on#work .lead,.c3-arm.c3-on#work .wbox,.c3-arm.c3-on .c3-pk,.c3-arm.c3-on .c3-note,.c3-arm.c3-on#work .eyebrow{opacity:1;transform:none}
.c3-arm:not(.c3-on)#work .lead,.c3-arm:not(.c3-on)#work .wbox,.c3-arm:not(.c3-on) .c3-pk,.c3-arm:not(.c3-on) .c3-note,.c3-arm:not(.c3-on)#work .eyebrow{transition-duration:.25s;transition-delay:0s}
.c3-arm .c3-kick{transition:opacity .8s ease .1s}.c3-arm:not(.c3-on) .c3-kick{opacity:0;transition-duration:.25s;transition-delay:0s}
/* Pricing card */
#pricing.c3{background:#f6efe2!important;color:#0f1d15}
#pricing .c3-ttl{font-size:clamp(36px,4.6vw,72px)!important;line-height:1.12!important;color:#0f1d15!important;margin:0!important;max-width:none!important}
#pricing [lang=ar] .c3-ttl{line-height:1.45!important}
#pricing .c3-ttl em,#pricing .c3-kick{color:#b07d1e!important}
#pricing .c3-lead{color:#4a564d!important}
.c3-pk{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.c3-pk .pk{border-top:2px solid rgba(31,58,43,.2);padding-top:16px}.c3-pk .pk.hl{border-color:#b07d1e}
#pricing .c3-pk h3{margin:0;font-size:20px;color:#0f1d15}#pricing .c3-pk .tg{margin:4px 0 12px;color:#5b5b66;font-size:14.5px}
.c3-pk .pr{font-family:ElMessiri,'El Messiri',serif;font-weight:400;font-variant-numeric:lining-nums;font-size:clamp(40px,4vw,60px);line-height:1.1;color:#0f1d15}
.c3-pk .cur{font-size:.42em;font-weight:600;opacity:.7;margin-inline-end:6px}
.c3-pk .std{font-size:13px;color:#6b6b72}.c3-pk .std s{font-family:'El Messiri',ElMessiri,serif;white-space:nowrap}
.c3-pk .pop{display:inline-block;font-size:11px;font-weight:700;background:#1f3a2b;color:#e8b04a;border-radius:99px;padding:3px 9px;margin-inline-start:8px;vertical-align:middle}
.c3-note{margin:0;font-size:13px;color:#6b6b72}
@media (max-width:700px){
 .c3-pk{grid-template-columns:1fr;gap:8px}
 .c3-pk .pk{border:1px solid rgba(31,58,43,.12);background:#fff;border-radius:16px;padding:12px 16px;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px}
 .c3-pk .pk.hl{background:#1f3a2b;border-color:#1f3a2b}
 #pricing .c3-pk .pk.hl h3{color:#f7f4ee}.c3-pk .pk.hl .pr{color:#e8b04a}.c3-pk .pk.hl .std{color:#c9d4cb}
 .c3-pk .pk.hl .pop{background:#e8b04a;color:#0f1d15}
 #pricing .c3-pk .tg{display:none}.c3-pk .pr{grid-column:2;grid-row:1/3;font-size:32px}.c3-pk .std{grid-column:1}
 .c3-pk .pk:nth-child(1){margin-inline-end:16%}.c3-pk .pk:nth-child(2){margin-inline-end:8%}
}
/* hold after Pricing before the café (like the ~400px hold after About) */
html.stk-on .stk-hold{height:400px}
/* How promise: one flowing sentence, natural wrap, a bit lower */
.c3-promise{max-width:none!important;margin-top:clamp(10px,4vh,40px)!important;display:block!important;padding-inline-start:62px!important;position:relative}
.c3-promise .ic{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%)}
.c3-promise>span:not(.ic),.c3-promise b{display:inline}
#work .c3-ttl{margin-bottom:clamp(10px,2vh,20px)!important}
/* v12 laptop gaps: Why Zeyn + Work labels sit like the Services kicker (header bottom 86 -> label ~130) */
@media (min-width:641px){#problem.stk-why>.wrap{padding-top:38px}
 html.stk-on #work.stk{justify-content:flex-start}}
/* How: very faint background photo, only a tone shift */

#how.c3::before{content:"";position:absolute;inset:0;background:url(../img/howbg.jpg) center/cover;opacity:.035;filter:grayscale(.5) sepia(.3) blur(2px);pointer-events:none;z-index:0}
#how.c3>*{position:relative;z-index:1}
@media (min-width:641px){#zh .zh-seg.zh-lang,#zh .zh-seg.zh-cta{font-size:12.5px;line-height:17px;padding:5px 12px}}
@media (max-width:640px){#zh .zh-seg.zh-lang,#zh .zh-seg.zh-menu{font-size:12px;line-height:16px;padding:5px 11px}}
/* keep the button group's outer height so it stays centred in the capsule */
@media (min-width:641px){#zh .zh-sc{padding:6.5px 5px}html.stk-on #work.stk>.cin{padding-top:12px}}
@media (max-width:640px){#zh .zh-sc{padding:6px 4px}}

/* Menu button = language button (size, font, height), every header state */
@media (min-width:641px){#zh .zh-seg.zh-menu{font-size:12.5px;line-height:17px;padding:5px 12px}}
#zh .zh-seg.zh-lang,#zh .zh-seg.zh-menu{min-width:58px}
/* pill text centring: fixed height + flex centre + text-box trim (cap/alphabetic) where supported */
#zh .zh-seg.zh-lang,#zh .zh-seg.zh-cta,#zh .zh-seg.zh-menu{display:inline-flex;align-items:center;justify-content:center;height:29px;line-height:1!important;padding-top:0!important;padding-bottom:0!important}
@media (max-width:640px){#zh .zh-seg.zh-lang,#zh .zh-seg.zh-menu{height:28px}}
/* text centring: fixed-height flex pill, line-height 1 span, script-aware optical nudge (ink measured in WebKit + Chromium; text-box-trim gave different results per engine) */
#zh .zh-seg .zt{display:block;line-height:1;position:relative}
#zh .zh-cta .zt,html[lang=ar] #zh .zh-lang .zt{top:-.1em}
html:not([lang=ar]) #zh .zh-lang .zt{top:-.32em}
html[lang=ar] #zh .zh-cta .zt{top:-.08em}
/* service pills link to their entry on the services page (same box, no layout shift) */
.c3-g li{padding:0;transition:border-color .2s,background-color .2s}
.c3-g li a{display:block;padding:5px 11px;color:inherit;text-decoration:none;border-radius:inherit}
.c3-g li:hover,.c3-g li:focus-within{border-color:rgba(232,176,74,.7);background:rgba(247,244,238,.06)}
.c3-g li a:focus-visible{outline:2px solid #e8b04a;outline-offset:2px}
.c3-in[lang=en] .c3-pk .cur{font-size:.6em;margin-inline-end:1px;vertical-align:.32em;font-family:inherit;font-weight:400;opacity:.85}