/* Home signature compositions on inner pages: the solutions stack, industry panels and methodology roadmap.
   Values follow the approved home (wp-content/themes/alofouq). Layouts degrade to readable lists without JS. */
:root{--sig-navy:#0a3d77;--sig-blue:#004eaa;--sig-blue-400:#3c8ad2;--sig-blue-200:#77c7fa;--sig-ink:4,17,31;--sig-radius:18px;--sig-ease:cubic-bezier(.22,.61,.36,1);--sig-reveal:cubic-bezier(.2,.7,.2,1);--sig-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;--sig-header:88px}
.sig-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:var(--sig-blue);font-size:14px;font-weight:700;line-height:1.5}
.sig-eyebrow:before{content:'';flex:none;width:26px;height:1.5px;background:currentColor}
.sig-tagline{display:block;margin-top:8px;color:var(--sig-blue-200);font-size:13px;font-weight:700;letter-spacing:0;line-height:1.5}

/* Stack — pinned, horizontally travelling solution cards */
.sig-stack{max-width:none;padding:0}
.sig-stack__pin{position:relative}
.sig-stack__stage{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.2vh,28px);padding-block:90px}
.sig-stack.is-pinned .sig-stack__stage{position:sticky;top:var(--sig-header);height:calc(100vh - var(--sig-header));padding-block:clamp(16px,3vh,36px);overflow:hidden}
.sig-stack__head{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--space)}
.sig-stack.is-pinned .sig-stack__head h2{font-size:clamp(28px,2.6vw,40px)}
.sig-stack__head .section-intro{max-width:760px;margin-top:14px;font-size:16px}
.sig-stack__cards{--card-w:clamp(300px,62vw,780px);display:flex;align-items:center;gap:24px;overflow-x:auto;overflow-y:hidden;padding-block:14px;padding-inline:calc((100% - var(--card-w))/2);scroll-snap-type:x mandatory;scrollbar-width:none;outline-offset:-4px}
.sig-stack__cards::-webkit-scrollbar{display:none}
.sig-stack__cards.is-driven{overflow-x:hidden;scroll-snap-type:none}
.sig-stack__card{position:relative;isolation:isolate;flex:0 0 auto;inline-size:var(--card-w);block-size:min(48vh,440px);min-block-size:340px;border-radius:var(--sig-radius);overflow:hidden;scroll-snap-align:center;color:white;transform-origin:center;transition:box-shadow .5s var(--sig-ease);will-change:transform,opacity}
.sig-stack__card.is-active{z-index:3;box-shadow:0 14px 34px -18px rgba(10,61,119,.32)}
.sig-stack__card>img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--sig-ease)}
.sig-stack__card:before{content:'';position:absolute;inset:0;z-index:-2;background:rgba(0,78,170,.12);mix-blend-mode:color}
.sig-stack__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--sig-ink),.82),rgba(var(--sig-ink),.74) 16%,rgba(var(--sig-ink),.5) 31%,rgba(var(--sig-ink),.12) 45% 52%,rgba(var(--sig-ink),.78) 66%,rgba(var(--sig-ink),.9))}
.sig-stack__body{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:clamp(26px,3.4vw,46px)}
.sig-stack__index{font-family:var(--sig-mono);font-size:12px;font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.8)}
.sig-stack__name{margin-top:10px;color:white;font-size:clamp(26px,3vw,40px);font-weight:700;line-height:1.3;text-wrap:balance}
.sig-stack__desc{max-width:56ch;margin-bottom:12px;color:white;font-size:16px;line-height:1.8}
.sig-stack__tag{display:block;font-family:var(--sig-mono);font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.8)}
[dir=rtl] .sig-stack__tag{font-family:inherit;font-size:13px;letter-spacing:0}
.sig-stack__more{display:inline-flex;align-items:center;gap:14px;margin-top:14px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.6);font-size:13px;font-weight:700}
.sig-stack__more .icon{width:18px;height:18px;transition:translate .35s var(--sig-ease)}
.sig-stack__card:hover .sig-stack__more .icon{translate:5px 0}
[dir=rtl] .sig-stack__card:hover .sig-stack__more .icon{translate:-5px 0}
.sig-stack__card:hover>img{transform:scale(1.03)}
.sig-stack__card:focus-visible{outline:2px solid var(--sig-blue);outline-offset:4px}
.sig-stack__rail{display:flex;justify-content:center;gap:6px}
.sig-stack__pip{position:relative;width:28px;height:18px;padding:0;border:0;background:none;cursor:pointer}
.sig-stack__pip:before{content:'';position:absolute;inset-inline:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:#e2dac8;transition:background .35s var(--sig-ease)}
.sig-stack__pip.is-on:before{background:var(--sig-blue)}
.sig-stack__pip:focus-visible{outline:2px solid var(--sig-blue);outline-offset:2px;border-radius:4px}
@media(max-width:880px),(prefers-reduced-motion:reduce){.sig-stack__stage{padding-block:60px}.sig-stack__cards{--card-w:min(84vw,520px)}.sig-stack__card{block-size:auto;min-block-size:min(110vw,460px)}}
@media(max-width:700px){.sig-stack__stage{padding-block:55px}.sig-stack__desc{font-size:15px}.sig-stack__name{font-size:26px}}

/* Panels — expanding image panels */
.sig-panels{display:flex;flex-direction:column;gap:12px}
.sig-panel{position:relative;isolation:isolate;border-radius:var(--sig-radius);overflow:hidden;color:white;background:var(--sig-navy)}
.sig-panel__cover{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--sig-ease)}
.sig-panel:before,.sig-panel:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.sig-panel:before{background:rgba(var(--sig-ink),.18);transition:background-color .55s var(--sig-ease)}
.sig-panel:after{background:linear-gradient(to top,rgba(var(--sig-ink),.92),rgba(var(--sig-ink),.62) 40%,rgba(var(--sig-ink),.22) 78%,rgba(var(--sig-ink),0))}
.sig-panel__trigger{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 24px;border:0;background:none;color:white;font:inherit;cursor:pointer}
.sig-panel__side{font-size:clamp(17px,1.7vw,21px);font-weight:700;line-height:1.4;opacity:0;transition:opacity .55s var(--sig-ease)}
.sig-panel__trigger:focus-visible{outline:2px solid var(--sig-blue-200);outline-offset:-5px;border-radius:var(--sig-radius)}
.sig-panel__content{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;padding:clamp(22px,2.6vw,32px)}
.sig-panel__num{font-family:var(--sig-mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--sig-blue-200)}
.sig-panel__title{margin-top:12px;color:white;font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.35}
.sig-panel__tagline{margin-top:6px;color:var(--sig-blue-200);font-size:15px;font-weight:700;line-height:1.6}
.sig-panel__desc{max-width:52ch;margin-top:12px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.8}
.sig-panel__list{display:grid;gap:4px;max-width:52ch;margin:14px 0 0;padding:0;list-style:none}
.sig-panel__list li{position:relative;padding-inline-start:18px;color:rgba(255,255,255,.82);font-size:14px;line-height:1.7}
.sig-panel__list li:before{content:'';position:absolute;inset-inline-start:0;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--sig-blue-200)}
.sig-panel__tag{margin-top:10px;color:var(--sig-blue-200);font-size:12px;font-weight:600;letter-spacing:.08em}
.sig-panel__link{display:inline-flex;align-items:center;align-self:flex-start;gap:14px;margin-top:18px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.6);color:white;font-size:13px;font-weight:700}
.sig-panel__link .icon{width:18px;height:18px;transition:translate .35s var(--sig-ease)}
.sig-panel__link:hover .icon{translate:5px 0}
[dir=rtl] .sig-panel__link:hover .icon{translate:-5px 0}
/* Interactive once scripts run: collapsed rows on small screens, expanding columns on desktop. */
.js .sig-panel:not(.is-open){height:88px}
.js .sig-panel:not(.is-open):before{background:rgba(var(--sig-ink),.52)}
.js .sig-panel:not(.is-open) .sig-panel__side{opacity:1}
.js .sig-panel .sig-panel__content{transition:opacity .55s var(--sig-ease) .15s}
.js .sig-panel:not(.is-open) .sig-panel__content{opacity:0;visibility:hidden;transition:opacity .3s var(--sig-ease),visibility 0s .3s}
.js .sig-panel.is-open .sig-panel__trigger{pointer-events:none}
.sig-panel.is-open .sig-panel__cover{transform:scale(1.05)}
@media(min-width:861px){
 .js .sig-panels{flex-direction:row;gap:14px;height:clamp(440px,40vw,540px)}
 .js .sig-panel{flex:1 1 0;min-width:56px;height:auto!important;transition:flex-grow .8s cubic-bezier(.66,0,.2,1)}
 .js .sig-panel.is-open{flex-grow:5.5}
 .js .sig-panel__side{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
 .js .sig-panel__content{position:absolute;inset-block:0;inset-inline-start:0;width:max(100%,380px);min-height:0}
}
@media(prefers-reduced-motion:reduce){.sig-panel,.sig-panel:before,.sig-panel__cover,.sig-panel__side,.sig-panel__content{transition-duration:.01ms!important}}

/* Roadmap — phases along a lit spine */
.sig-roadmap{--rm-spine:clamp(76px,10vh,104px);--rm-node:58px;--rm-card:clamp(276px,26vw,372px);--rm-gap:clamp(40px,4vw,68px);position:relative;overflow-x:clip;color:white;background:linear-gradient(180deg,var(--sig-navy) 0%,var(--sig-blue) 55%,var(--sig-navy) 100%)}
.sig-roadmap__stage{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:clamp(72px,10vh,120px) clamp(56px,8vh,96px)}
.sig-roadmap.is-pinned .sig-roadmap__stage{position:sticky;top:var(--sig-header);height:calc(100vh - var(--sig-header));padding-block:clamp(20px,4vh,48px)}
.sig-roadmap__bg,.sig-roadmap__dots,.sig-roadmap__glow{position:absolute;pointer-events:none}
.sig-roadmap__bg{inset:0;background:radial-gradient(120% 80% at 50% -10%,rgba(60,138,210,.35) 0%,transparent 55%),linear-gradient(180deg,var(--sig-navy) 0%,var(--sig-blue) 55%,var(--sig-navy) 100%)}
.sig-roadmap__dots{inset:0;opacity:.05;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);background-size:46px 46px}
.sig-roadmap__glow{inset-block-end:0;inset-inline-start:15%;width:70%;height:240px;background:radial-gradient(60% 100% at 50% 100%,rgba(60,138,210,.22),transparent 70%)}
.sig-roadmap__head{position:relative;z-index:2;max-width:900px;margin-inline:auto;padding-inline:var(--space);text-align:center}
.sig-roadmap__head .sig-eyebrow{justify-content:center;color:var(--sig-blue-200)}
.sig-roadmap__head h2{color:white;font-size:clamp(28px,3vw,44px);line-height:1.35;text-wrap:balance}
.sig-roadmap__head .section-intro{max-width:720px;margin:14px auto 0;color:rgba(255,255,255,.72);font-size:16px;line-height:1.8}
.sig-roadmap__viewport{position:relative;z-index:2;flex:0 1 auto;min-height:0;margin-top:clamp(20px,3.5vh,52px)}
.sig-roadmap.is-pinned .sig-roadmap__viewport{overflow:hidden}
.sig-roadmap:not(.is-pinned) .sig-roadmap__viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--space),calc((100vw - var(--max))/2 + var(--space))) var(--space);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.sig-roadmap__viewport:focus-visible{outline:2px solid var(--sig-blue-200);outline-offset:-2px}
.sig-roadmap__track{position:relative;display:flex;align-items:flex-start;width:max-content;padding-inline:max(var(--space),calc((100vw - var(--max))/2 + var(--space))) var(--space);will-change:transform}
.sig-roadmap__steps{display:flex;margin:0;padding:0;list-style:none}
.sig-roadmap__spine{position:absolute;inset-block-start:var(--rm-spine);inset-inline:0;height:2px;background:rgba(255,255,255,.2)}
.sig-roadmap__fill{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:linear-gradient(to right,rgba(60,138,210,0) 0%,var(--sig-blue-400) 10%,#2a7ddb 100%);box-shadow:0 0 18px rgba(60,138,210,.7)}
[dir=rtl] .sig-roadmap__fill{background:linear-gradient(to left,rgba(60,138,210,0) 0%,var(--sig-blue-400) 10%,#2a7ddb 100%)}
.sig-roadmap__tip{position:absolute;inset-block-start:50%;inset-inline-end:-6px;width:12px;height:12px;border-radius:50%;background:#bfe7fb;box-shadow:0 0 16px 5px rgba(60,138,210,.85),0 0 40px 10px rgba(60,138,210,.35);opacity:0;transform:translateY(-50%);transition:opacity .3s ease}
.sig-roadmap__fill.is-lit .sig-roadmap__tip{opacity:1}
.sig-roadmap__step,.sig-roadmap__end{position:relative;flex:0 0 auto;width:var(--rm-card);padding-inline-end:var(--rm-gap);scroll-snap-align:start}
.sig-roadmap__node{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:var(--rm-node);height:var(--rm-node);margin-top:calc(var(--rm-spine) - var(--rm-node)/2 + 1px);border:1px solid rgba(255,255,255,.16);border-radius:50%;background:#0b1c30;color:rgba(255,255,255,.5);transition:background .5s ease,border-color .5s ease,box-shadow .5s ease,color .5s ease}
.sig-roadmap__index{font-family:var(--sig-mono);font-size:14px;font-weight:600;letter-spacing:.04em}
.sig-roadmap__label{position:absolute;bottom:calc(100% + 12px);inset-inline-start:0;font-family:var(--sig-mono);font-size:12px;font-weight:600;letter-spacing:.14em;white-space:nowrap;color:rgba(255,255,255,.45);transition:color .5s ease}
[dir=rtl] .sig-roadmap__label{font-family:inherit;font-size:14px;letter-spacing:0}
.sig-roadmap__step.is-reached .sig-roadmap__node{border-color:var(--sig-blue-400);background:linear-gradient(180deg,var(--sig-blue-400),#2a7ddb);box-shadow:0 0 0 6px rgba(60,138,210,.12),0 0 34px rgba(60,138,210,.6);color:white}
.sig-roadmap__step.is-reached .sig-roadmap__label{color:var(--sig-blue-200)}
.sig-roadmap__card{padding-top:clamp(16px,2.2vh,24px);transition:opacity .7s var(--sig-reveal),transform .7s var(--sig-reveal)}
.sig-roadmap.is-live .sig-roadmap__step:not(.is-reached) .sig-roadmap__card{opacity:0;transform:translateY(26px)}
.sig-roadmap__title{margin-bottom:10px;color:white;font-size:clamp(22px,2vw,30px);font-weight:700;line-height:1.35}
.sig-roadmap__desc{color:rgba(255,255,255,.7);font-size:15px;line-height:1.75}
.sig-roadmap__desc+.sig-roadmap__desc{margin-top:8px}
.sig-roadmap__end{width:clamp(300px,30vw,420px);padding-inline-end:0}
.sig-roadmap__end-core{display:flex;flex-direction:column;gap:14px;padding-top:calc(var(--rm-spine) - 30px);transition:opacity 1s ease,transform 1s ease}
.sig-roadmap.is-live .sig-roadmap__end:not(.is-reached) .sig-roadmap__end-core{opacity:0;transform:translateY(20px)}
.sig-roadmap__orb{width:16px;height:16px;border-radius:50%;background:#cfecfb;box-shadow:0 0 24px 8px rgba(60,138,210,.7),0 0 70px 22px rgba(60,138,210,.25);animation:sig-orb 3.4s ease-in-out infinite}
@keyframes sig-orb{50%{transform:scale(1.25);opacity:.8}}
.sig-roadmap__end-kicker{font-family:var(--sig-mono);font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--sig-blue-400)}
[dir=rtl] .sig-roadmap__end-kicker{font-family:inherit;font-size:14px;letter-spacing:0;color:var(--sig-blue-200)}
.sig-roadmap__end-title{color:white;font-size:clamp(22px,2.2vw,32px);font-weight:700;line-height:1.35}
.sig-roadmap__end-sub{color:rgba(255,255,255,.62);font-size:15px;line-height:1.8}
.sig-roadmap__meter{position:relative;z-index:2;width:40%;max-width:260px;height:2px;margin:clamp(18px,2.6vh,34px) auto 0;background:rgba(255,255,255,.18)}
.sig-roadmap__meter span{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:linear-gradient(to right,var(--sig-blue-400),var(--sig-blue-200))}
[dir=rtl] .sig-roadmap__meter span{background:linear-gradient(to left,var(--sig-blue-400),var(--sig-blue-200))}
.sig-roadmap:not(.is-pinned) .sig-roadmap__meter{display:none}
@media(max-width:760px){.sig-roadmap{--rm-spine:88px;--rm-node:50px;--rm-card:min(78vw,320px);--rm-gap:26px}.sig-roadmap__track{padding-inline:var(--space)}.sig-roadmap:not(.is-pinned) .sig-roadmap__viewport{scroll-padding-inline:var(--space)}.sig-roadmap__end{width:min(82vw,340px)}.sig-roadmap__stage{padding-block:60px 48px}}
@media(prefers-reduced-motion:reduce){.sig-roadmap__orb{animation:none}.sig-roadmap__card,.sig-roadmap__end-core,.sig-roadmap__node{transition:none}}
@media print{.sig-stack__stage,.sig-roadmap__stage{position:static!important;height:auto!important}.sig-stack__cards{flex-wrap:wrap;padding-inline:0}.sig-stack__card{opacity:1!important;transform:none!important;break-inside:avoid}.sig-stack__rail,.sig-roadmap__meter{display:none}.sig-roadmap__track{flex-wrap:wrap;width:auto;transform:none!important}.sig-roadmap__card,.sig-roadmap__end-core{opacity:1!important;transform:none!important}.js .sig-panel .sig-panel__content{opacity:1;visibility:visible}}
.sig-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.sig-roadmap__head .sig-actions{justify-content:center}
.sig-roadmap__head .sig-actions .button{color:white;border-color:rgba(255,255,255,.5)}
