/* SPAN CS homepage sections (Nov 2026): stats bar, global footprint, tech strip */
#trust-bar{background:#fff;padding:14px 0 30px;border:0}
#trust-bar::before,#trust-bar::after{display:none}
#trust-bar .trust-grid{background:none;border:0;border-radius:0;gap:0;max-width:1120px;margin:0 auto;overflow:visible}
#trust-bar .trust-item{position:relative;display:block;padding:24px 20px 46px;text-align:center;text-decoration:none;color:inherit;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;-webkit-tap-highlight-color:transparent}
#trust-bar .trust-item:hover{background:none}
#trust-bar .trust-item::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:1px;background:#DCDFE1}
#trust-bar .trust-item:first-child::before{display:none}
#trust-bar .trust-item::after{content:"";position:absolute;inset:4px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #E4EAF2,0 12px 32px rgba(27,41,72,.1),0 1px 3px rgba(27,41,72,.07);opacity:0;transform:scale(.96);transition:opacity .22s ease,transform .22s ease}
#trust-bar .trust-item>*{position:relative;z-index:1}
#trust-bar .trust-val{color:#1B2948;font-size:clamp(2.2rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin-bottom:0;transition:transform .22s ease}
#trust-bar .trust-val .suf{color:#D27E32}
#trust-bar .trust-lbl{color:#6C7789;font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.7;margin:10px auto 0;max-width:17ch;transition:color .22s ease}
#trust-bar .trust-more{position:absolute;left:0;right:0;bottom:17px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-d,inherit);font-size:.78rem;font-weight:700;color:#1B2948;opacity:0;transform:translateY(5px);transition:opacity .22s ease,transform .22s ease}
#trust-bar .trust-more svg{color:#D27E32;transition:transform .22s ease}
@media(hover:hover){
#trust-bar .trust-item:hover::after{opacity:1;transform:none}
#trust-bar .trust-item:hover .trust-val{transform:translateY(-3px)}
#trust-bar .trust-item:hover .trust-lbl{color:#1B2948}
#trust-bar .trust-item:hover .trust-more{opacity:1;transform:none}
#trust-bar .trust-item:hover .trust-more svg{transform:translateX(3px)}
}
#trust-bar .trust-item:focus-visible::after,#trust-bar .trust-item:active::after{opacity:1;transform:none}
#trust-bar .trust-item:focus-visible .trust-more{opacity:1;transform:none}
@media(hover:none){#trust-bar .trust-item{padding-bottom:24px}#trust-bar .trust-more{display:none}}
@media(max-width:768px){#trust-bar{padding:12px 0}#trust-bar .trust-grid{grid-template-columns:1fr 1fr}#trust-bar .trust-item{padding:18px 12px 20px}#trust-bar .trust-item:nth-child(odd)::before{display:none}#trust-bar .trust-more{display:none}}

#global-presence{padding:92px 0 96px;background:radial-gradient(820px 520px at 72% 46%,rgba(52,96,178,.34),rgba(13,27,62,0) 70%),#0D1B3E}
#global-presence .presence-layout{grid-template-columns:minmax(0,.88fr) minmax(0,1.120fr);gap:36px;align-items:center}
#global-presence .map-box{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.gm-svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font-d,inherit)}
.gm-pulse{opacity:.22;transform-box:fill-box;transform-origin:center;animation:gmPulse 2.800s ease-out infinite}
@keyframes gmPulse{0%{transform:scale(.55);opacity:.4}100%{transform:scale(1.500);opacity:0}}
.gm-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 44px;margin-top:22px;color:rgba(255,255,255,.86);font-size:.9rem}
.gm-legend span{display:inline-flex;align-items:center;gap:10px}
.gm-k{width:11px;height:11px;border-radius:50%;display:inline-block;background:#F59920}
.gm-k-so{background:#3DD68C}
.gm-k-hq{outline:1.500px dashed #F59920;outline-offset:3px;margin:0 4px}
#global-presence .office-list{gap:14px}
#global-presence .office-row{position:relative;overflow:hidden;min-height:78px;padding:15px 16px 15px 82px;background:rgba(255,255,255,.07);border-radius:16px}
#global-presence .office-row::before{content:"";position:absolute;inset:0 auto 0 0;width:132px;background:var(--flag) left center/cover no-repeat;opacity:.2;filter:saturate(.6);-webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.5) 34%,transparent 92%);mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.5) 34%,transparent 92%);pointer-events:none}
#global-presence .office-info{position:relative}
#global-presence .office-info h4{font-size:1.050rem}
#global-presence .office-info p{font-size:.84rem;line-height:1.450;color:rgba(255,255,255,.78);margin-top:3px}
@media(max-width:1100px){#global-presence{padding:72px 0}#global-presence .presence-layout{grid-template-columns:1fr;gap:44px}}
@media(max-width:560px){.gm-lb{display:none}#global-presence .office-row{padding-left:74px}.gm-legend{gap:10px 22px;font-size:.82rem}}

#tech-stack{padding:26px 0;background:#0D1B3E}
#tech-stack::before,#tech-stack::after{display:none}
.ts-strip{display:flex;align-items:center;gap:36px}
.ts-label{flex:none;margin:0;font-family:var(--font-d,inherit);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);padding-right:36px;border-right:1px solid rgba(255,255,255,.16);white-space:nowrap;line-height:2.400}
.ts-marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ts-track{display:flex;width:max-content;animation:tsSlide 42s linear infinite}
.ts-marquee:hover .ts-track{animation-play-state:paused}
.ts-set{display:flex;align-items:center;gap:60px;padding:0 60px 0 0;margin:0;list-style:none}
.ts-item{display:flex;align-items:center;gap:12px;color:#fff;font-family:var(--font-d,inherit);font-size:.98rem;font-weight:600;white-space:nowrap}
.ts-item i{font-size:1.550rem;line-height:1}
.ts-item img{height:26px;width:auto;display:block}
@keyframes tsSlide{to{transform:translateX(-50%)}}
@media(max-width:768px){#tech-stack{padding:20px 0}.ts-strip{flex-direction:column;gap:12px}.ts-label{border:0;padding:0;line-height:1.400}.ts-marquee{width:100%}.ts-set{gap:40px;padding-right:40px}}
@media(prefers-reduced-motion:reduce){.gm-run{display:none}.gm-pulse{animation:none}}

/* map: connections, hover linking with the office cards */
#global-presence{scroll-margin-top:72px}
.gm-arc{stroke-opacity:.85;stroke-dasharray:1;stroke-dashoffset:1;transition:opacity .25s ease,stroke-width .25s ease}
.map-box.revealed .gm-arc,.map-box.in .gm-arc{animation:gmDraw 1.500s cubic-bezier(.4,0,.2,1) .25s forwards}
@keyframes gmDraw{to{stroke-dashoffset:0}}
.gm-mk,.gm-lb,.gm-run{transition:opacity .25s ease}
.gm-svg.gm-focus .gm-arc,.gm-svg.gm-focus .gm-mk,.gm-svg.gm-focus .gm-lb,.gm-svg.gm-focus .gm-run{opacity:.2}
.gm-svg.gm-focus .on,.gm-svg.gm-focus .gm-mk[data-o="SG"]{opacity:1}
.gm-svg.gm-focus .gm-arc.on{stroke-width:2.600;stroke-opacity:1}
#global-presence .office-row{transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
#global-presence .office-row.is-on{background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(245,153,32,.5)}
@media(max-width:560px){.gm-dots{stroke-width:4.600}.gm-arc{stroke-width:3.200}.gm-mk circle:not(.gm-pulse){transform-box:fill-box;transform-origin:center;transform:scale(1.700)}}

/* phones and small tablets: the map hides its labels, so the offices show as a compact list above it */
@media(max-width:768px){
#global-presence .office-list{display:flex;flex-wrap:wrap;gap:8px}
#global-presence .office-row{min-height:0;width:auto;max-width:100%;flex:0 0 auto;padding:8px 14px 8px 12px;border-radius:999px;gap:8px;transform:none}
#global-presence .office-row::before{position:static;width:8px;height:8px;border-radius:50%;background:#F59920;opacity:1;-webkit-mask-image:none;mask-image:none;flex:none}
#global-presence .office-row[data-o="US"]::before,#global-presence .office-row[data-o="ZA"]::before{background:#3DD68C}
#global-presence .office-row[data-o="SG"]::before{outline:1.500px dashed #F59920;outline-offset:2px;margin:0 3px}
#global-presence .office-info h4{font-size:.86rem}
#global-presence .office-info p{display:none}
}

/* specialist capability: sticky intro + bento cards with cursor spotlight */
.cap-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.200fr);gap:64px;align-items:start}
.cap-head{position:sticky;top:120px}
.cap-head p{color:rgba(255,255,255,.68);font-size:1.050rem;line-height:1.750;margin:16px 0 28px;max-width:44ch}
.cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cap-card{position:relative;overflow:hidden;padding:26px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);transition:opacity .6s ease,transform .3s ease,border-color .3s ease,background .3s ease}
.cap-card::before{content:"";position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(245,153,32,.2),transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.cap-card>*{position:relative}
.cap-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(245,153,32,.12);border:1px solid rgba(245,153,32,.28);color:#F59920;margin-bottom:18px;transition:background .3s ease,color .3s ease}
.cap-card .cap-num{position:absolute;top:24px;right:24px;font-family:var(--font-d,inherit);font-size:.8rem;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.32)}
.cap-card h3{font-family:var(--font-d,inherit);font-size:1.120rem;font-weight:700;color:#fff;margin-bottom:6px}
.cap-card p{font-size:.92rem;line-height:1.600;color:rgba(255,255,255,.68)}
.cap-wide{grid-column:1/-1;display:flex;align-items:center;gap:22px;padding:30px;background:linear-gradient(120deg,rgba(245,153,32,.14),rgba(255,255,255,.04) 55%)}
.cap-wide .cap-ic{width:58px;height:58px;border-radius:16px;margin-bottom:0;flex:none}
.cap-wide h3{font-size:1.350rem}
@media(hover:hover){.cap-card.revealed:hover{transform:translateY(-4px);border-color:rgba(245,153,32,.5)}.cap-card:hover::before{opacity:1}.cap-card:hover .cap-ic{background:#F59920;color:#0D1B3E}}
@media(max-width:1100px){.cap-layout{grid-template-columns:1fr;gap:36px}.cap-head{position:static}}
@media(max-width:560px){.cap-grid{grid-template-columns:1fr}.cap-wide{padding:24px;gap:16px}}

/* fainter map */
.gm-dots{opacity:.5}
#trust-bar .trust-val{font-weight:700}
/* enterprise success: six columns side by side with thin dividers */
#stories .stories-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:1px solid #E4EAF2;border-bottom:1px solid #E4EAF2}
#stories .story-card,#stories .story-card:hover{background:none;border:0;border-left:1px solid #E4EAF2;border-radius:0;box-shadow:none;padding:30px 22px 32px;overflow:visible;transition:background .25s ease,opacity .6s ease,transform .6s ease}
#stories .story-card.revealed{transform:none}
#stories .story-card:first-child{border-left:0}
#stories .story-card::before,#stories .story-card::after{display:none}
#stories .story-bar{padding:0;margin:0 0 18px;background:none;border:0;height:auto;min-height:0}
#stories .story-tag{display:inline-block;padding:0;background:none;border:0;border-radius:0;font-family:var(--font-d,inherit);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#B4690E}
#stories .story-body{padding:0}
#stories .story-client{font-family:var(--font-d,inherit);font-size:1.020rem;font-weight:600;letter-spacing:-.015em;line-height:1.300;color:#0F1C2D;margin-bottom:8px}
#stories .story-desc{font-size:.875rem;line-height:1.600;color:#5C7290}
#stories .story-foot{display:none}
@media(hover:hover){#stories .story-card:hover{background:#fff}}
@media(max-width:1100px){#stories .stories-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#stories .story-card:nth-child(3n+1){border-left:0}#stories .story-card:nth-child(n+4){border-top:1px solid #E4EAF2}}
@media(max-width:560px){#stories .stories-grid{grid-template-columns:1fr 1fr}#stories .story-card,#stories .story-card:hover{padding:22px 14px;border-left:1px solid #E4EAF2;border-top:0}#stories .story-card:nth-child(odd){border-left:0}#stories .story-card:nth-child(n+3){border-top:1px solid #E4EAF2}}

/* ===== homepage flow: one light canvas, one header pattern, one card style; navy kept for the map and the closing CTA ===== */
#stories,#who-we-place,#tech-delivery,#faq{background:#fff;padding:104px 0;border-top:1px solid #E9EDF2}
#stories .sec-header,#faq .sec-header{text-align:left;margin:0 0 48px;max-width:640px}
#stories .eyebrow,#who-we-place .eyebrow,#tech-delivery .eyebrow,#faq .eyebrow,#global-presence .eyebrow{justify-content:flex-start;font-size:.72rem;letter-spacing:.18em}
#stories .eyebrow::before,#who-we-place .eyebrow::before,#tech-delivery .eyebrow::before,#faq .eyebrow::before,#global-presence .eyebrow::before{content:"";display:block;width:28px;height:1px;background:currentColor;margin-right:12px;border-radius:0}
#stories h2,#who-we-place h2,#tech-delivery h2,#faq h2,#global-presence h2{font-weight:600;letter-spacing:-.03em}
.fx-card,.cap-card,#tech-delivery .delivery-card{background:#fff;border:1px solid #E4EAF2;border-radius:14px;box-shadow:none}
.fx-card{padding:28px;transition:opacity .6s ease,transform .3s ease,border-color .3s ease,box-shadow .3s ease}
@media(hover:hover){.fx-card.revealed:hover,#tech-delivery .delivery-card:hover{transform:translateY(-3px);border-color:#E3B877;box-shadow:0 14px 34px rgba(27,41,72,.08)}}
.fx-top{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.fx-num{font-size:.72rem;font-weight:600;letter-spacing:.1em;color:#B4690E}
.fx-line{flex:1;height:1px;background:#E4EAF2}
.fx-tag{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6C7789}
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.proof-fig{font-family:var(--font-d,inherit);font-size:2.700rem;font-weight:300;letter-spacing:-.04em;line-height:1;color:#1B2948;margin-bottom:16px}
.proof-card h3{font-family:var(--font-d,inherit);font-size:1.020rem;font-weight:600;letter-spacing:-.012em;color:#0F1C2D;margin-bottom:6px}
.proof-card p{font-size:.9rem;line-height:1.600;color:#5C7290}
@media(max-width:900px){.proof-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.proof-grid{grid-template-columns:1fr}#stories,#who-we-place,#tech-delivery,#faq{padding:72px 0}}
/* capability on the light canvas */
.cap-head p{color:#5C7290}
.cap-card::before{background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(245,153,32,.11),transparent 70%)}
.cap-card h3{color:#0F1C2D}
.cap-card p{color:#5C7290}
.cap-card .cap-num{color:#B4690E;font-weight:600;font-size:.72rem}
.cap-wide{background:linear-gradient(120deg,#FFF6E8,#fff 60%)}
/* technology strip on the light canvas */
#tech-stack{background:#fff;border-top:1px solid #E9EDF2;padding:24px 0}
.ts-label{color:#6C7789;border-right-color:#DCDFE1}
.ts-item{color:#1B2948}
.ts-item .fa-github{color:#1B2948!important}
/* FAQ: same split layout as the capability section */
#faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.200fr);gap:64px;align-items:start}
#faq .sec-header{position:sticky;top:120px;margin:0}
#faq .faq-wrap{max-width:none;margin:0;width:100%}
@media(max-width:1100px){#faq .wrap{grid-template-columns:1fr;gap:32px}#faq .sec-header{position:static}}

/* ===== round 7 ===== */
/* overview: sits on the navy and runs straight into the map section */
#trust-bar{background:#0D1B3E;padding:40px 0 0;border:0}
#trust-bar .trust-grid{padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
#trust-bar .trust-val{color:#fff;font-weight:600}
#trust-bar .trust-val .suf{color:#F59920}
#trust-bar .trust-lbl{color:rgba(255,255,255,.62)}
#trust-bar .trust-item::before{background:rgba(255,255,255,.14)}
#trust-bar .trust-item::after{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
#trust-bar .trust-more{color:#fff}
#trust-bar .trust-more svg{color:#F59920}
@media(hover:hover){#trust-bar .trust-item:hover .trust-lbl{color:#fff}}
#global-presence{padding-top:76px}
/* offices: clean list with round flags */
@media(min-width:769px){
#global-presence .office-list{display:block;margin-top:8px;border-top:1px solid rgba(255,255,255,.12)}
#global-presence .office-row,#global-presence .office-row:hover{display:flex;align-items:center;gap:16px;min-height:0;width:100%;padding:13px 10px;background:none;border-radius:0;border-bottom:1px solid rgba(255,255,255,.12);box-shadow:none;transform:none;overflow:visible}
#global-presence .office-row::before{position:static;flex:none;width:30px;height:30px;border-radius:50%;background:var(--flag) center/cover no-repeat;opacity:1;filter:none;-webkit-mask-image:none;mask-image:none;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
#global-presence .office-row::after{content:"Delivery";margin-left:auto;flex:none;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#F59920;padding:5px 10px;border:1px solid rgba(245,153,32,.4);border-radius:999px}
#global-presence .office-row[data-o="US"]::after,#global-presence .office-row[data-o="ZA"]::after{content:"Sales";color:#3DD68C;border-color:rgba(61,214,140,.4)}
#global-presence .office-row[data-o="SG"]::after{content:"HQ";color:#0D1B3E;background:#F59920;border-color:#F59920}
#global-presence .office-info{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;min-width:0}
#global-presence .office-info h4{font-size:1rem;font-weight:600;min-width:118px}
#global-presence .office-info p{margin:0;font-size:.84rem;color:rgba(255,255,255,.6)}
#global-presence .office-row:hover,#global-presence .office-row.is-on{background:rgba(255,255,255,.06);box-shadow:none}
}
/* specialist capability: plain index list instead of icon cards */
.cap-list{border-top:1px solid #DCE2EA}
.cap-row{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.150fr) 20px;align-items:baseline;column-gap:20px;padding:24px 10px;border-bottom:1px solid #DCE2EA;text-decoration:none;color:inherit;transition:opacity .6s ease,transform .6s ease,background .25s ease}
.cap-n{font-size:.76rem;font-weight:600;letter-spacing:.08em;color:#B4690E}
.cap-row h3{font-family:var(--font-d,inherit);font-size:1.320rem;font-weight:500;letter-spacing:-.022em;color:#0F1C2D;transition:transform .25s ease}
.cap-row p{font-size:.95rem;line-height:1.550;color:#5C7290}
.cap-go{align-self:center;color:#B4690E;opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .25s ease}
@media(hover:hover){.cap-row:hover{background:#FAFBFD}.cap-row:hover h3{transform:translateX(6px)}.cap-row:hover .cap-go{opacity:1;transform:none}}
@media(max-width:700px){.cap-row{grid-template-columns:34px minmax(0,1fr);row-gap:4px;padding:18px 4px}.cap-row p{grid-column:2}.cap-go{display:none}.cap-row h3{font-size:1.150rem}}
/* figures carry the accent */
.proof-fig{font-size:3.100rem;color:#C07A1C}

/* flags: faint, squarish; they come up to full strength on the row you hover */
@media(min-width:769px){
#global-presence .office-row::before{width:32px;height:24px;border-radius:5px;opacity:.3;filter:saturate(.75);box-shadow:0 0 0 1px rgba(255,255,255,.35);transition:opacity .25s ease,filter .25s ease}
#global-presence .office-row:hover::before,#global-presence .office-row.is-on::before{opacity:.95;filter:none}
}

/* office type: legend symbols instead of word tags; fainter map */
@media(min-width:769px){
#global-presence .office-row::after,#global-presence .office-row[data-o]::after{content:"";flex:none;width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#F59920;margin:0 12px 0 auto}
#global-presence .office-row[data-o="US"]::after,#global-presence .office-row[data-o="ZA"]::after{background:#3DD68C}
#global-presence .office-row[data-o="SG"]::after{background:#F59920;outline:1.500px dashed #F59920;outline-offset:3px}
}

/* flags fainter still (map dots back to their earlier strength) */
@media(min-width:769px){
#global-presence .office-row::before{opacity:.15;filter:saturate(.6)}
#global-presence .office-row:hover::before,#global-presence .office-row.is-on::before{opacity:.6;filter:none}
}