/* ---- home.css ---- */
/* ---------- clients: the jigsaw board ---------- */
.clients{overflow:clip;background:radial-gradient(ellipse 50% 40% at 50% 100%,rgba(29,77,255,.07),transparent 70%),#fff}
.board{position:relative;margin-top:clamp(8px,2vw,24px)}
.board svg{display:block;width:100%;height:auto;overflow:visible}
.board .tile{cursor:default;transition:transform .5s cubic-bezier(.2,.75,.25,1),opacity .7s}
.board .tile path{fill:url(#tileg);stroke:rgba(10,16,48,.16);stroke-width:1.4;transition:fill .3s,stroke .3s}
.board .tile:hover path{fill:#fff;stroke:var(--cobalt);stroke-width:1.8}
.board .tile:hover{transform:translateY(-8px);filter:url(#tsh)}
.board .lgw{pointer-events:none;transition:transform .5s cubic-bezier(.2,.75,.25,1),opacity .7s}
.board .lgw image{filter:url(#bgray);opacity:.78;transition:opacity .3s}
.board .lgw.hv{transform:translateY(-8px)}.board .lgw.hv image{filter:none;opacity:1}
.board.pre .lgw{opacity:0;transform:translateY(-30px)}
.board .tile text{font:600 15px var(--f-d);fill:#5b6690;text-anchor:middle;letter-spacing:-.01em}
.board .tile.acc path{fill:url(#accp);stroke:rgba(143,176,255,.5)}
.board .tile.acc:hover path{fill:url(#accp);stroke:#8fb0ff}
.board .tile.acc .ghost{fill:none;stroke:#fff;stroke-width:9;opacity:.28;transition:opacity .4s}
.board .tile.acc:hover .ghost{opacity:.6}
.board.pre .tile{opacity:0;transform:translateY(-30px)}
.board .cta-piece path{fill:url(#bcta);stroke:#3b6bff;stroke-width:1.6}
.board-cta{position:absolute;left:0;width:100%;display:flex;align-items:center;gap:clamp(12px,3vw,40px);padding:0 clamp(18px,4%,56px);color:#fff}
.board-cta .txt{flex:1;min-width:0}
.board-cta b{display:block;font:650 clamp(17px,2.17vw,33px)/1.05 var(--f-d);letter-spacing:-.03em}
.board-cta span{display:block;margin-top:.4em;font-size:clamp(12px,1vw,15px);color:#d5e0ff}
.board-cta .btn{flex:none}
.cta-mark{flex:none;height:clamp(54px,7vw,104px);width:auto;transform:rotate(-14deg) translateY(0);filter:drop-shadow(0 0 22px rgba(120,170,255,.8));animation:hov 5s ease-in-out infinite;transition:transform .5s cubic-bezier(.2,.75,.25,1)}
@keyframes hov{50%{transform:rotate(-8deg) translateY(-10px)}}
.board-cta:hover .cta-mark{animation:none;transform:rotate(0) translateY(6px) scale(1.06)}
.logos-fb{display:none}
html:not(.js) .logos-fb{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
html:not(.js) .board{display:none}
@media(max-width:640px){.cta-mark{display:none}.board-cta{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px}.board-cta .btn{padding:.6em 1em;font-size:13px}}

/* ---------- services: expanding panels ---------- */
.sps{display:flex;gap:12px;height:clamp(580px,46vw,660px)}
.spn{position:relative;flex:1 1 0;min-width:0;border-radius:26px;overflow:hidden;color:#e8eeff;background:#050b2b url(../media/images/facets.svg) center/cover;isolation:isolate;transition:flex .7s cubic-bezier(.2,.75,.25,1);box-shadow:inset 0 0 0 1px rgba(143,176,255,.16),0 30px 60px -40px rgba(10,16,60,.5)}
.spn::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 55% at 65% 18%,rgba(29,77,255,.5),transparent 70%),linear-gradient(rgba(3,5,15,.05),rgba(3,5,15,.8) 74%)}
.spn.on{flex:3.3}
.spn-art{position:absolute;left:50%;top:30px;width:430px;transform:translateX(-50%) scale(.42);transform-origin:50% 0;opacity:.75;transition:transform .7s cubic-bezier(.2,.75,.25,1),opacity .5s}
.spn.on .spn-art{transform:translateX(-50%) scale(.95);opacity:1}
.spn-art svg{width:100%;height:auto;overflow:visible}
.spn-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.2vw,32px)}
.spn-btn{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;font-family:var(--f-d);font-weight:650;letter-spacing:-.035em;line-height:1.02;font-size:calc(clamp(20px,1.75vw,25px) * var(--fs,1));transition:font-size .5s cubic-bezier(.2,.75,.25,1)}
.spn.on .spn-btn{font-size:calc(clamp(26px,2.62vw,39px) * var(--fs,1));cursor:default}
.spn-go{display:none}
.spn-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s cubic-bezier(.2,.75,.25,1),opacity .35s}
.spn.on .spn-more{grid-template-rows:1fr;opacity:1;transition-delay:0s,.2s}
.spn-more>div{overflow:hidden}
.spn-more p{margin-top:12px;color:#b9c6ee;font-size:calc(16px * var(--fs,1));max-width:32em}
.spn-caps{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;margin-top:16px}
.spn-caps li{position:relative;padding-left:18px;font-size:calc(14px * var(--fs,1));line-height:1.35;color:#dbe4ff}
.spn-caps li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8fb0ff,#2a5bff)}
.spn-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.spn-foot .lbl{font-size:calc(13px * var(--fs,1));color:#8fa0d8;margin-right:4px}
.spn-foot a.c{font-size:calc(13px * var(--fs,1));font-weight:600;padding:7px 12px;border-radius:99px;border:1px solid rgba(160,190,255,.35);background:rgba(255,255,255,.05);color:#fff;transition:background .2s,border-color .2s}
.spn-foot a.c:hover{background:rgba(255,255,255,.16);border-color:rgba(190,210,255,.7)}
.spn-foot .link{margin-left:auto;font-size:calc(14px * var(--fs,1))}
/* illustration life */
.spn .bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.4);transition:transform .9s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--d,0) * 70ms)}
.spn.on .bar{transform:scaleY(1)}
.spn .draw{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.5s cubic-bezier(.3,.7,.2,1) .2s}
.spn.on .draw{stroke-dashoffset:0}
.spn .fl{animation:hov2 6s ease-in-out infinite}
@keyframes hov2{50%{transform:translateY(-6px)}}
.spn .orb{animation:orb 22s linear infinite;transform-origin:210px 150px}
@keyframes orb{to{transform:rotate(360deg)}}
@media(max-width:900px){
  .sps{flex-direction:column;height:auto;gap:10px}
  .spn{flex:none;transition:none}
  .spn::before{background:radial-gradient(ellipse 80% 70% at 70% 0,rgba(29,77,255,.45),transparent 70%),linear-gradient(rgba(3,5,15,.1),rgba(3,5,15,.7))}
  .spn-art{position:relative;left:auto;top:auto;width:100%;max-width:340px;margin:0 auto;transform:none;opacity:1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s}
  .spn.on .spn-art{transform:none}
  .spn-art>div{overflow:hidden}
  .spn.on .spn-art{grid-template-rows:1fr}
  .spn-body{position:relative;padding:0 22px 6px}
  .spn-btn{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 0 18px;font-size:calc(clamp(21px,6.09vw,28px)!important * var(--fs,1))}
  .spn-go{display:grid;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(160,190,255,.4);place-items:center;transition:transform .35s,background .25s}
  .spn.on .spn-go{transform:rotate(90deg);background:var(--cobalt);border-color:var(--cobalt)}
  .spn-more p{margin-top:0}
  .spn-caps{grid-template-columns:1fr}
  .spn-foot{padding-bottom:20px}
}

/* ---------- process: faceted numerals ---------- */
.chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.piece{position:relative;--bg:#0b1347;transition:transform .9s cubic-bezier(.2,.75,.25,1),opacity .7s}
.piece .body{position:relative;height:100%;overflow:hidden;background:linear-gradient(160deg,#0e1a5c,var(--bg) 60%);border-radius:22px;padding:clamp(24px,2.4vw,36px) clamp(22px,2.2vw,34px) clamp(26px,2.4vw,36px);-webkit-mask:radial-gradient(circle 15px at 0 50%,#0000 98%,#000);mask:radial-gradient(circle 15px at 0 50%,#0000 98%,#000)}
.piece:first-child .body{-webkit-mask:none;mask:none}
.piece .knob{position:absolute;right:-14px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--bg);z-index:2}
.piece:last-child .knob{display:none}
.piece .num{position:absolute;right:.02em;top:.02em;font:800 clamp(120px,11.2vw,184px)/1 var(--f-d);letter-spacing:-.06em;background:url(../media/images/facets-bright.svg) 30% 40%/240% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px rgba(170,195,255,.7);opacity:1;pointer-events:none;filter:drop-shadow(0 0 26px rgba(60,110,255,.55));transition:transform 1s cubic-bezier(.2,.75,.25,1)}
.piece:hover .num{transform:translate(-6px,6px) scale(1.04)}
.piece .lab{position:relative;font-size:calc(13px * var(--fs,1));color:var(--sky);letter-spacing:.02em}
.piece h3{position:relative;font-size:calc(clamp(24px,2.26vw,33px) * var(--fs,1));margin:clamp(70px,8vw,120px) 0 .45em;color:#fff}
.piece p{position:relative;color:#aebbe6;font-size:calc(16px * var(--fs,1));min-height:5.4em}
.piece ul{position:relative;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-d);display:grid;gap:10px}
.piece li{position:relative;padding-left:22px;font-size:calc(15px * var(--fs,1));color:#dbe4ff}
.piece li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8fb0ff,#2a5bff)}
.js .chain:not(.is-in) .piece{opacity:0;transform:translateX(calc((var(--i) - 1.5) * 34px))}
.chain.is-in .piece{transition-delay:calc(var(--i) * 90ms)}
.chain.is-in .knob{animation:snap 1.2s .9s both}
@keyframes snap{0%{box-shadow:0 0 0 0 rgba(80,130,255,0)}35%{box-shadow:0 0 22px 6px rgba(80,140,255,.65)}100%{box-shadow:0 0 0 0 rgba(80,130,255,0)}}
@media(max-width:1000px){
  .chain{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .piece:nth-child(3) .body{-webkit-mask:none;mask:none}
  .piece:nth-child(2) .knob{display:none}
}
@media(max-width:640px){
  .chain{grid-template-columns:1fr;row-gap:8px}
  .piece .body,.piece:nth-child(3) .body{-webkit-mask:radial-gradient(circle 15px at 50% 0,#0000 98%,#000);mask:radial-gradient(circle 15px at 50% 0,#0000 98%,#000)}
  .piece:first-child .body{-webkit-mask:none;mask:none}
  .piece .knob{right:auto;left:50%;top:auto;bottom:-14px;margin:0 0 0 -14px}
  .piece:nth-child(2) .knob{display:block}
  .piece p{min-height:0}
  .piece h3{margin-top:84px}
  .js .chain:not(.is-in) .piece{transform:translateY(calc((var(--i) - 1.5) * 22px))}
}


/* ---------- work: featured showcase + film strip ---------- */
@media(max-width:900px){

}

/* ---------- contact + careers: equal-height columns ---------- */
.contact{background:radial-gradient(ellipse 60% 50% at 0 100%,rgba(29,77,255,.22),transparent 70%),radial-gradient(ellipse 40% 40% at 100% 0,rgba(90,60,255,.16),transparent 70%),var(--night)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,110px);align-items:stretch}
.split>.l{display:flex;flex-direction:column}
.split .sh{grid-template-columns:1fr;margin-bottom:clamp(20px,2.4vw,32px);row-gap:16px}
.contact .sh h2{font-size:calc(clamp(28px,3.28vw,48px) * var(--fs,1))}
.reach{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;margin-bottom:clamp(22px,2.6vw,34px)}
.reach dt{font-size:calc(13.5px * var(--fs,1));color:var(--mute-d);margin-bottom:3px}
.reach dd{margin:0;overflow-wrap:anywhere;font:560 calc(clamp(15px,1.19vw,18px) * var(--fs,1))/1.25 var(--f-d);letter-spacing:-.02em;color:#fff}
.reach dd small{display:block;margin-top:3px;font:400 calc(13.5px * var(--fs,1))/1.4 var(--f-b);letter-spacing:0;color:#9fb0e6}
.reach dd a{border-bottom:1px solid rgba(143,176,255,.4);transition:border-color .2s,color .2s}
.reach dd a:hover{color:var(--sky);border-color:var(--sky)}
.next{margin-top:auto;padding-top:22px;border-top:1px solid var(--line-d)}
.next h3{font:600 calc(14px * var(--fs,1))/1 Inter,sans-serif;color:var(--mute-d);margin-bottom:18px;letter-spacing:0}
.next ol{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.next li{position:relative;padding-top:46px}
.next li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;border:1px solid rgba(143,176,255,.4);display:grid;place-items:center;font:600 calc(13px * var(--fs,1))/1 var(--f-d);color:#fff;background:var(--night)}
.next li:not(:last-child)::after{content:"";position:absolute;left:40px;right:-8px;top:16px;height:1px;background:var(--line-d)}
.next b{display:block;font:600 calc(15.5px * var(--fs,1))/1.25 var(--f-d);color:#fff;letter-spacing:-.01em}
.next span{display:block;margin-top:3px;color:#aebbe6;font-size:calc(13.5px * var(--fs,1));line-height:1.4}
.form,.cv{display:flex;flex-direction:column}
.form{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid var(--line-d);border-radius:26px;padding:clamp(22px,2.8vw,40px)}
.form h3,.cv h3{font-size:calc(clamp(19px,1.74vw,24px) * var(--fs,1));margin-bottom:4px;color:#fff}
.form .sub,.cv .sub{color:var(--mute-d);font-size:calc(14.5px * var(--fs,1));margin-bottom:20px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;align-content:start}
.fgrid .full{grid-column:1/-1}
.fgrid .grow{display:flex;flex-direction:column}
.fgrid .grow textarea{flex:1;min-height:84px;height:96px}
.field label{display:block;font-size:calc(14px * var(--fs,1));font-weight:500;color:#c8d4f7;margin-bottom:6px}
.field input,.field textarea{width:100%;background:rgba(255,255,255,.045);border:1px solid rgba(150,175,255,.22);border-radius:12px;padding:.8em 1em;color:#fff;font:inherit;font-size:calc(16px * var(--fs,1));transition:border-color .2s,box-shadow .2s,background .2s}
.field textarea{resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6f7eb0}
.field input:hover,.field textarea:hover{border-color:rgba(170,195,255,.4)}
.field input:focus,.field textarea:focus{outline:0;border-color:#6f97ff;background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(60,110,255,.2)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#ff7a8a}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:18px}
.form-foot small{color:var(--mute-d);font-size:calc(13.5px * var(--fs,1));max-width:26em}
.status{margin-top:12px;font-size:calc(15px * var(--fs,1));color:#9fe6c9;min-height:1.2em}
.status.err{color:#ff9aa6}
/* careers */
.careers .split>.l{background:#060d33 url(../media/images/facets.svg) center/cover;color:#e8eeff;border-radius:26px;padding:clamp(26px,3.2vw,48px);position:relative;overflow:hidden;isolation:isolate}
.careers .split>.l::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(3,5,15,.55),rgba(3,5,15,.82)),radial-gradient(ellipse 70% 50% at 20% 100%,rgba(29,77,255,.5),transparent 70%)}
.careers .split>.l .art{position:absolute;right:-16%;top:-10%;width:48%;opacity:.16;z-index:-1;pointer-events:none;color:#fff}
.open-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:calc(13px * var(--fs,1));font-weight:600;padding:7px 13px;border-radius:99px;background:rgba(31,227,200,.12);border:1px solid rgba(31,227,200,.4);color:#8ef3df;margin-bottom:22px}
.open-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#1fe3c8;box-shadow:0 0 10px #1fe3c8}
.careers .split .sh{margin-bottom:18px}
.careers .intro{color:#d3dcfa;font-size:calc(clamp(15px,1.19vw,17px) * var(--fs,1));max-width:28em}
.perks{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;margin-top:auto;padding-top:clamp(26px,3vw,44px)}
.perks li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start}
.perks .pi{grid-row:1/3;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(160,190,255,.3);display:grid;place-items:center;color:#9fc0ff}
.perks .pi .ic{width:22px;height:22px}
.perks b{display:block;font:650 calc(clamp(17px,1.38vw,19px) * var(--fs,1))/1.1 var(--f-d);letter-spacing:-.02em;color:#fff}
.perks small{display:block;margin-top:3px;color:#bccaf2;font-size:calc(14px * var(--fs,1));line-height:1.4}
.cv{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:clamp(22px,2.8vw,40px)}
.cv h3{color:var(--ink)}
.cv .sub{color:var(--mute)}
.cv .field label{color:var(--ink)}
.cv .field input,.cv .field textarea{background:#fff;border-color:var(--line);color:var(--ink)}
.cv .field input::placeholder,.cv .field textarea::placeholder{color:#8b93b3}
.cv .field input:hover,.cv .field textarea:hover{border-color:rgba(10,16,48,.4)}
.cv .field input:focus,.cv .field textarea:focus{border-color:var(--cobalt);background:#fff;box-shadow:0 0 0 4px rgba(29,77,255,.14)}
.drop{position:relative;display:flex;align-items:center;gap:16px;padding:16px 18px;border:1.5px dashed rgba(10,16,48,.28);border-radius:14px;background:#fff;cursor:pointer;transition:border-color .2s,background .2s}
.drop:hover,.drop:focus-within{border-color:var(--cobalt);background:#f7f9ff}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop .pic{width:42px;height:42px;border-radius:12px;background:rgba(29,77,255,.1);color:var(--cobalt);display:grid;place-items:center}
.drop b{display:block;font-size:calc(15px * var(--fs,1));line-height:1.3}
.drop small{color:var(--mute);font-size:calc(13.5px * var(--fs,1))}
.cv .status{color:#0f7a56}.cv .status.err{color:#c62b43}
.cv .form-foot small{color:var(--mute)}
@media(max-width:960px){.split{grid-template-columns:1fr}.perks{margin-top:34px}.next{margin-top:28px}}
@media(max-width:560px){.reach{grid-template-columns:1fr}.next ol{grid-template-columns:1fr;gap:0}.next li{padding:0 0 18px 46px}.next li::before{top:-2px}.next li:not(:last-child)::after{left:15.5px;right:auto;top:34px;bottom:2px;width:1px;height:auto}.perks{grid-template-columns:1fr}}


/* who: progress + hint */
@keyframes whobounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}


/* ---------- about: chips, lifecycle line, closing link ---------- */
.chips2{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(12px,1.6vw,22px);max-width:36em}
.chips2 li{padding:9px 14px;border-radius:99px;border:1px solid rgba(143,176,255,.28);background:rgba(255,255,255,.04);font-size:calc(14.5px * var(--fs,1));line-height:1.2;color:#dbe4ff}
.cycle{display:flex;flex-wrap:wrap;align-items:center;row-gap:12px;margin-top:clamp(16px,2vw,26px)}
.cycle li{display:flex;align-items:center;gap:9px;font:600 calc(15px * var(--fs,1))/1.2 var(--f-d);letter-spacing:-.01em;color:#fff}
.cycle li+li::before{content:"";width:clamp(16px,2vw,30px);height:1px;margin:0 10px 0 4px;background:linear-gradient(90deg,#3b6bff,#8fb0ff)}
.cycle b{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8fb0ff,#1d4dff);box-shadow:0 0 10px rgba(60,110,255,.8)}
.cycle li:last-child b{background:radial-gradient(circle at 35% 30%,#9ff5e6,#1fe3c8);box-shadow:0 0 10px rgba(31,227,200,.8)}
.chap-cta{margin-top:22px}

/* ---------- industries: a sector selector with a drawn illustration for each ---------- */
.ind{background:radial-gradient(ellipse 50% 55% at 78% 42%,rgba(29,77,255,.2),transparent 70%),radial-gradient(ellipse 40% 40% at 0 100%,rgba(90,60,255,.14),transparent 70%),#050a24;color:#e8eeff;overflow:clip}
.ind .tab{color:#6f97ff}.ind .sh p{color:var(--mute-d)}
.ind-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,5vw,88px);align-items:start}
.ind-tab{grid-column:1;position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:13px 4px;background:none;border:0;border-top:1px solid var(--line-d);text-align:left;color:#8191c6;cursor:pointer;font:620 calc(clamp(20px,2.05vw,31px) * var(--fs,1))/1.1 var(--f-d);letter-spacing:-.03em;transition:color .3s,padding .35s cubic-bezier(.2,.75,.25,1)}
.ind-tab:nth-last-child(2){border-bottom:1px solid var(--line-d)}
.ind-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;border:1px solid rgba(143,176,255,.2);color:#8ea0d8;transition:background .35s,border-color .35s,color .35s,box-shadow .35s}
.ind-ic .ic{width:21px;height:21px;stroke-width:1.7}
.ind-tab:hover{color:#d3dcff}
.ind-tab.on{color:#fff;padding-left:14px}
.ind-tab.on .ind-ic{background:color-mix(in srgb,var(--ac) 20%,transparent);border-color:color-mix(in srgb,var(--ac) 60%,transparent);color:var(--ac);box-shadow:0 0 24px color-mix(in srgb,var(--ac) 35%,transparent)}
.ind-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--ac),transparent 85%);transform-origin:0 50%;transform:scaleX(0);transition:transform .4s}
.ind-tab.on .ind-prog{transform:scaleX(1)}
.ind.play .ind-tab.on .ind-prog{transition:none;animation:indp var(--dur,6.5s) linear both}
.ind.hold .ind-tab.on .ind-prog{animation-play-state:paused}
@keyframes indp{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ind-panel{grid-column:2;position:relative;border-radius:28px;overflow:hidden;isolation:isolate;background:#06104a url(../media/images/facets.svg) center/cover;box-shadow:inset 0 0 0 1px rgba(143,176,255,.18),0 50px 100px -40px rgba(0,0,0,.85);opacity:0;visibility:hidden;transform:translateY(16px) scale(.985);transition:opacity .5s,transform .7s cubic-bezier(.2,.75,.25,1),visibility .5s;scroll-margin-top:calc(var(--nav-s) + 20px)}
.ind-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 55% 50% at 50% 34%,color-mix(in srgb,var(--ac) 42%,transparent),transparent 72%),linear-gradient(rgba(3,5,15,.25),rgba(3,5,15,.86) 78%)}
.ind-panel.on{opacity:1;visibility:visible;transform:none}
.ind-art{position:relative;display:grid;place-items:center;aspect-ratio:16/9.4}
.ind-orbit{position:absolute;height:112%;aspect-ratio:1;overflow:visible}
.ind-orbit circle{fill:none;stroke:rgba(143,176,255,.18)}
.ind-orbit .o2{stroke-dasharray:2 9;stroke:rgba(160,190,255,.35);stroke-width:2;transform-origin:200px 200px;animation:rot 70s linear infinite}
.ind-orbit .o3{stroke:rgba(143,176,255,.1)}
.ind-orbit circle[r="3.2"]{fill:rgba(170,195,255,.5);stroke:none}
.ind-orbit circle.on{fill:var(--ac);stroke:none;filter:drop-shadow(0 0 8px var(--ac))}
.ind-svg{position:relative;width:min(56%,340px);height:auto;overflow:visible;color:#e3ebff}
.ind-svg path,.ind-svg circle,.ind-svg rect,.ind-svg line{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s cubic-bezier(.3,.7,.2,1)}
.ind-svg .a{stroke:var(--ac);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ac) 70%,transparent))}
.ind-panel.on .ind-svg path,.ind-panel.on .ind-svg circle,.ind-panel.on .ind-svg rect,.ind-panel.on .ind-svg line{stroke-dashoffset:0}
.ind-panel.on .ind-svg .a{transition-delay:.45s}
.ind-svg .spin{animation:rot 10s linear infinite}
.ind-svg .lift{animation:hov2 4s ease-in-out infinite}
.ind-body{position:relative;padding:4px clamp(22px,2.8vw,40px) clamp(24px,2.8vw,38px)}
.ind-body h3{font-size:calc(clamp(26px,2.5vw,38px) * var(--fs,1));letter-spacing:-.04em;color:#fff}
.ind-body>p{margin-top:10px;color:#c2cff4;font-size:calc(clamp(15px,1.15vw,17.5px) * var(--fs,1));max-width:36em}
.ind-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 30px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-d)}
.ind-k{display:block;font-size:calc(13px * var(--fs,1));color:#93a4d8;margin-bottom:10px}
.ind-build{display:grid;gap:7px}
.ind-build li{position:relative;padding-left:17px;font-size:calc(14.5px * var(--fs,1));line-height:1.35;color:#e1e8ff}
.ind-build li::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac)}
.ind-work{display:flex;flex-wrap:wrap;gap:8px}
.ind-work .c{font-size:calc(13px * var(--fs,1));font-weight:600;padding:7px 12px;border-radius:99px;border:1px solid rgba(160,190,255,.35);background:rgba(255,255,255,.05);color:#fff;transition:background .2s,border-color .2s}
.ind-work .c:hover{background:rgba(255,255,255,.15);border-color:color-mix(in srgb,var(--ac) 70%,transparent)}
@media(max-width:900px){
  .ind-grid{display:block}
  .ind-tab{font-size:calc(clamp(19px,5.4vw,24px) * var(--fs,1));padding:12px 2px}
  .ind-tab:nth-last-child(2){border-bottom:0}
  .ind-panel{display:none;margin:4px 0 16px;transform:none}
  .ind-panel.on{display:block}
  .ind-art{aspect-ratio:16/10}
  .ind-grid::after{content:"";display:block;border-top:1px solid var(--line-d)}
}
html:not(.js) .ind-grid{display:block}
html:not(.js) .ind-panel{display:block;opacity:1;visibility:visible;transform:none;margin:8px 0 24px}
html:not(.js) .ind-svg *{stroke-dashoffset:0}

/* ---------- services: "Across every engagement" ---------- */
.eng{margin-top:clamp(26px,3vw,44px);display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:clamp(20px,3vw,52px);align-items:start;padding:clamp(22px,2.4vw,34px);border-radius:26px;background:#fff;border:1px solid var(--line)}
.eng-t{font:650 calc(clamp(20px,1.7vw,26px) * var(--fs,1))/1.08 var(--f-d);letter-spacing:-.03em;max-width:7.5em;color:var(--ink)}
.eng-list{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.eng-list::before{content:"";position:absolute;left:5px;right:0;top:7px;height:1px;background:linear-gradient(90deg,var(--cobalt),rgba(29,77,255,.12))}
.eng-list li{position:relative;padding:28px 16px 0 0}
.eng-list li::before{content:"";position:absolute;left:0;top:2px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8fb0ff,#1d4dff);box-shadow:0 0 0 4px #fff,0 0 12px rgba(29,77,255,.55)}
.eng-list b{display:block;font:650 calc(16px * var(--fs,1))/1.2 var(--f-d);letter-spacing:-.015em;color:var(--ink)}
.eng-list span{display:block;margin-top:6px;font-size:calc(13.5px * var(--fs,1));line-height:1.45;color:var(--mute)}
@media(max-width:1180px){.eng{grid-template-columns:1fr}.eng-t{max-width:none}}
@media(max-width:900px){.eng-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}.eng-list::before{display:none}}
@media(max-width:560px){.eng-list{grid-template-columns:1fr 1fr}}


/* ==========================================================================
   Work: the showcase stage (copy + real screens standing on the piece) and the film strip
   ========================================================================== */
.sc{--dur:7s}
.sc-top{display:flex;justify-content:flex-end;margin:calc(clamp(40px,5vw,84px) * -1 + 8px) 0 16px}
.sc-filter{position:relative;display:inline-flex;padding:5px;border-radius:99px;background:var(--paper);border:1px solid var(--line);isolation:isolate}
.sc-filter button{position:relative;z-index:1;padding:9px 16px;border:0;border-radius:99px;background:none;color:var(--mute);font:600 calc(14px * var(--fs,1)) var(--f-b);white-space:nowrap;cursor:pointer;transition:color .3s}
.sc-filter button:hover{color:var(--ink)}
.sc-filter button.on{color:#fff}
.sc-fi{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:99px;background:var(--ink);box-shadow:0 8px 18px -8px rgba(10,16,48,.5);transition:left .45s cubic-bezier(.2,.75,.25,1),width .45s cubic-bezier(.2,.75,.25,1)}
.sc-stage{position:relative;border-radius:32px;overflow:hidden;isolation:isolate;color:#e8eeff;background:#04091f url(../media/images/facets.svg) center/cover;box-shadow:0 60px 110px -60px rgba(10,16,60,.75)}
.sc-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 45% 70% at 72% 62%,rgba(29,77,255,.55),transparent 70%),linear-gradient(100deg,rgba(3,5,15,.92) 0%,rgba(3,5,15,.72) 38%,rgba(3,5,15,.25) 70%,rgba(3,5,15,.55))}
.sc-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(143,176,255,.5),transparent)}
.sc-slides{display:grid}
.sc-slide{grid-area:1/1;position:relative;display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);gap:clamp(20px,3vw,56px);align-items:center;min-height:clamp(480px,44vw,640px);padding:clamp(28px,4vw,64px) clamp(28px,4vw,64px) clamp(24px,3vw,44px);opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.sc-slide.on{opacity:1;visibility:visible}
.sc-copy{position:relative;z-index:2}
.sc-copy>*{transition:opacity .6s,transform .8s cubic-bezier(.2,.75,.25,1)}
.sc-slide:not(.on) .sc-copy>*{opacity:0;transform:translateY(16px)}
.sc-slide.on .sc-copy>*:nth-child(2){transition-delay:.06s}.sc-slide.on .sc-copy>*:nth-child(3){transition-delay:.12s}.sc-slide.on .sc-copy>*:nth-child(4){transition-delay:.18s}.sc-slide.on .sc-copy>*:nth-child(5){transition-delay:.24s}.sc-slide.on .sc-copy>*:nth-child(6){transition-delay:.3s}
.sc-kind{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:calc(14px * var(--fs,1));font-weight:600;color:#9fb8ff}
.sc-kind i{width:8px;height:8px;border-radius:50%;background:#4d7dff;box-shadow:0 0 12px #4d7dff}
.sc-kind em{font-style:normal;padding:4px 10px;border-radius:99px;font-size:calc(12.5px * var(--fs,1));color:#ffd7a3;background:rgba(255,159,46,.12);border:1px solid rgba(255,159,46,.4)}
.sc-copy h3{margin:16px 0 14px;font-size:calc(clamp(30px,3.6vw,56px) * var(--fs,1));line-height:.95;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.sc-one{color:#b3c1ea;font-size:calc(clamp(15px,1.15vw,17.5px) * var(--fs,1));max-width:27em}
.sc-feats{display:grid;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-d)}
.sc-feats li{display:flex;align-items:center;gap:12px;font-size:calc(14.5px * var(--fs,1));font-weight:550;color:#e2e9ff}
.sc-feats .ic{box-sizing:content-box;width:16px;height:16px;padding:7px;border-radius:10px;color:#9fc0ff;background:rgba(77,125,255,.16);border:1px solid rgba(111,151,255,.3)}
.sc-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sc-acts .btn.g{color:#fff}
.sc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:22px;font-size:calc(13px * var(--fs,1));color:#8796c8}
.sc-meta i{width:4px;height:4px;border-radius:50%;background:#4a5a90}
.sc-shot{position:relative;z-index:1;align-self:stretch;display:grid;align-items:center;perspective:1600px}
.sc-shot>.fx-comp{transform:rotateY(var(--ry,-5deg)) rotateX(var(--rx,2deg));transition:transform .4s ease-out,opacity .7s,translate .9s cubic-bezier(.2,.75,.25,1)}
.sc-slide:not(.on) .sc-shot>.fx-comp{opacity:0;translate:40px 0}
.sc-ctrl{position:absolute;right:clamp(16px,2vw,28px);top:clamp(16px,2vw,26px);z-index:3;display:flex;align-items:center;gap:8px;font:600 calc(13px * var(--fs,1)) var(--f-b);color:#b3c1ea}
.sc-ctrl button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.sc-ctrl button:hover{background:rgba(255,255,255,.18)}
/* film strip (as before): a thumbnail of the real screen, the name and the progress */
.sc-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(124px,1fr);gap:10px;margin-top:14px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none}
.sc-strip::-webkit-scrollbar{display:none}
.sc-th{position:relative;display:block;color:var(--mute);font:600 calc(13px * var(--fs,1)) var(--f-b);transition:color .25s,transform .35s cubic-bezier(.2,.75,.25,1)}
.sc-th[hidden]{display:none}
.th-box{position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#0b1447 url(../media/images/facets.svg) center/cover;box-shadow:0 0 0 1px rgba(160,190,255,.2);opacity:.6;transition:opacity .3s,box-shadow .3s}
.th-box::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 80%,rgba(77,125,255,.45),transparent 70%)}
.th-ph{position:absolute;bottom:9%;left:50%;width:21%;aspect-ratio:9/19.5;margin-left:-10.5%;border-radius:5px;overflow:hidden;border:1.5px solid #07080b;box-shadow:0 0 0 1px rgba(170,195,255,.4),0 6px 12px rgba(0,0,0,.4)}
.th-ph.l{transform:translateX(-82%) scale(.9);filter:brightness(.85)}.th-ph.r{transform:translateX(82%) scale(.9);filter:brightness(.85)}
.th-ph img,.th-w img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.th-w{position:absolute;width:66%;aspect-ratio:1.6;border-radius:4px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(170,195,255,.35),0 6px 14px rgba(0,0,0,.45)}
.th-w.b{left:7%;top:10%}.th-w.f{right:7%;bottom:10%}.th-w.solo{left:12%;right:12%;top:14%;width:auto}
.th-w img{height:calc(100% - 7px)}
.th-bar{display:flex;align-items:center;gap:2px;height:7px;padding:0 3px;background:#161f52}
.th-bar i{width:2.5px;height:2.5px;border-radius:50%;background:#5a68aa}
.sc-th b{display:block;margin-top:9px;font-weight:600}
.sc-th:hover{transform:translateY(-3px);color:var(--ink)}.sc-th:hover .th-box{opacity:.9}
.sc-th.on{color:var(--ink)}.sc-th.on .th-box{opacity:1;box-shadow:0 0 0 2px var(--cobalt),0 16px 30px -12px rgba(29,77,255,.5)}
.sc-th .prog{display:block;height:3px;margin-top:6px;border-radius:2px;background:rgba(10,16,48,.1);overflow:hidden}
.sc-th .prog::after{content:"";display:block;height:100%;width:0;background:var(--cobalt)}
.sc-th.on .prog::after{width:100%}
.sc.play .sc-th.on .prog::after{width:0;animation:prog var(--dur,7s) linear forwards}
.sc.hold .sc-th.on .prog::after{animation-play-state:paused}
@keyframes prog{to{width:100%}}
@media(max-width:1100px){.sc-slide{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
@media(max-width:900px){
  .sc-top{margin-top:0;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .sc-slide{grid-template-columns:1fr;gap:10px;min-height:0;padding:64px 20px 26px}
  .sc-shot{order:-1}
  .sc-shot>.fx-comp{transform:none}
  .sc-ctrl{top:16px;right:16px}
  .sc-feats{display:none}
}

/* ---------- contact form: phone with country code, "how can we help" pills, topic select, consent ---------- */
.field select{width:100%;appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.045) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa0d8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px;border:1px solid rgba(150,175,255,.22);border-radius:12px;padding:.8em 2.4em .8em 1em;color:#fff;font:inherit;font-size:calc(16px * var(--fs,1));cursor:pointer;transition:border-color .2s,box-shadow .2s}
.field select:focus{outline:0;border-color:#6f97ff;box-shadow:0 0 0 4px rgba(60,110,255,.2)}
.field select option,.field select optgroup{color:#0a1030;background:#fff}
.tel{display:flex;gap:6px}
.tel select{flex:0 0 auto;width:104px;padding-right:2em;padding-left:.8em;background-position:right 8px center}
.tel input{flex:1;min-width:0}
fieldset.reasons{margin:0;padding:0;border:0;min-width:0}
.reasons legend{padding:0;margin-bottom:8px;font-size:calc(14px * var(--fs,1));font-weight:500;color:#c8d4f7}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill-r{position:relative;cursor:pointer}
.pill-r input{position:absolute;opacity:0;width:1px;height:1px}
.pill-r span{display:inline-flex;align-items:center;padding:9px 14px;border-radius:99px;border:1px solid rgba(150,175,255,.28);background:rgba(255,255,255,.04);font-size:calc(14px * var(--fs,1));font-weight:550;color:#cdd8ff;transition:background .2s,border-color .2s,color .2s}
.pill-r:hover span{border-color:rgba(170,195,255,.55);color:#fff}
.pill-r input:checked+span{color:#fff;background:linear-gradient(180deg,#2a6bff,#1650e8);border-color:#3b7bff;box-shadow:0 8px 20px -10px #1d4dff}
.pill-r input:focus-visible+span{outline:2px solid #7ea3ff;outline-offset:2px}
.chk{display:flex;align-items:flex-start;gap:10px;font-size:calc(14px * var(--fs,1));line-height:1.45;color:#c8d4f7;cursor:pointer}
.chk input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:#2a6bff;cursor:pointer}
.chk a{color:#8fb0ff;text-decoration:underline;text-underline-offset:3px}
.cv .chk{color:var(--ink)}.cv .chk a{color:var(--cobalt)}
.form .field.full.grow textarea{min-height:110px}
.reach dd a[target]{border-bottom-style:dashed}
@media(max-width:560px){.tel select{width:100px}.pill-r span{padding:8px 12px;font-size:calc(13.5px * var(--fs,1))}}
@media(max-width:600px){.fgrid{grid-template-columns:1fr}}

/* ---------- contact: information cards ---------- */
.contact .split{align-items:start}
.cinfo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cinfo li{display:flex;align-items:center;gap:14px;min-width:0;padding:14px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--line-d);transition:border-color .2s,background .2s}
.cinfo li.wide{grid-column:1/-1}
.cinfo li:hover{border-color:rgba(143,176,255,.35);background:rgba(255,255,255,.055)}
.ci-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;color:#9fc0ff;background:rgba(77,125,255,.14);border:1px solid rgba(111,151,255,.3)}
.ci-ic .ic{width:20px;height:20px}
.cinfo div{min-width:0}
.cinfo small{display:block;font-size:calc(12.5px * var(--fs,1));color:var(--mute-d);margin-bottom:3px}
.cinfo a,.cinfo b{display:block;font:560 calc(15px * var(--fs,1))/1.3 var(--f-d);letter-spacing:-.01em;color:#fff;overflow-wrap:anywhere}
.cinfo a:hover{color:var(--sky)}
.contact .next{margin-top:26px}
@media(max-width:1100px){.cinfo{grid-template-columns:1fr}}
@media(max-width:960px){.cinfo{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cinfo{grid-template-columns:1fr}}

/* ---------- custom checkboxes (contact + CV) ---------- */
.field .chk{display:flex;align-items:flex-start;gap:12px}
.field .chk input{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-items:center;width:20px;height:20px;min-height:0;margin:1px 0 0;padding:0;border-radius:6px;border:1.5px solid rgba(170,195,255,.55);background:rgba(255,255,255,.05);box-shadow:none;cursor:pointer;transition:background .2s,border-color .2s}
.field .chk input::after{content:"";width:10px;height:5px;margin-top:-3px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);transition:transform .15s}
.field .chk input:checked{background:#2a6bff;border-color:#2a6bff}
.field .chk input:checked::after{transform:rotate(-45deg) scale(1)}
.field .chk input:focus-visible{outline:2px solid #7ea3ff;outline-offset:2px}
.field .chk span{padding-top:1px}
.cv .field .chk input{border-color:rgba(10,16,48,.35);background:#fff}
.cv .field .chk input:checked{background:var(--cobalt);border-color:var(--cobalt)}

/* ---------- contact and careers pages ---------- */
.contact.pg-first{padding-top:calc(var(--nav-s,84px) + clamp(24px,4vw,56px))}
.contact.pg-first .crumbs{margin-bottom:24px}
.contact.pg-first h1{font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.045em;color:#fff}
.pg-hero{padding:calc(var(--nav-s,84px) + clamp(24px,4vw,56px)) 0 clamp(40px,5vw,72px);color:#e8eeff;background:radial-gradient(ellipse 50% 80% at 85% 0,rgba(29,77,255,.45),transparent 70%),linear-gradient(180deg,rgba(3,5,15,.6),#03050f),#050a28 url(../media/images/facets.svg) center/cover}
.pg-hero .crumbs{margin-bottom:24px}
.pg-hero h1{font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.045em;color:#fff}
.pg-hero p{max-width:40em;margin-top:16px;font-size:calc(clamp(16px,1.3vw,19px) * var(--fs,1));color:#b3c1ea}
#process{overflow-x:clip}

/* ==========================================================================
   About: one statement that lights up word by word as it scrolls past, then four editorial columns
   ========================================================================== */
.who3{position:relative;overflow:clip;background:radial-gradient(ellipse 45% 55% at 100% 0,rgba(29,77,255,.25),transparent 70%),#03050f;color:#e8eeff}
.who3::before{content:"";position:absolute;right:0;top:0;width:55%;height:70%;background:url(../media/images/facets.svg) right top/900px auto;opacity:.35;-webkit-mask:radial-gradient(ellipse 100% 100% at 100% 0,#000,transparent 70%);mask:radial-gradient(ellipse 100% 100% at 100% 0,#000,transparent 70%);pointer-events:none}
.w3-top{position:relative;max-width:1080px}
.w3-kick{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.w3-kick h2{font:600 calc(15px * var(--fs,1))/1 var(--f-b);letter-spacing:.02em;color:#8fb0ff}
.w3-st{font:650 clamp(32px,4.2vw,64px)/1.08 var(--f-d);letter-spacing:-.04em;text-wrap:balance}
.w3-st .w{color:rgba(232,238,255,.16);transition:color .35s}
.w3-st .w.on{color:#fff}
.w3-st .hl.on{color:transparent;background:linear-gradient(90deg,#8fb0ff,#4d7dff);-webkit-background-clip:text;background-clip:text}
.w3-cols{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,90px);border-top:1px solid rgba(143,176,255,.2)}
.w3-c{position:relative;display:flex;flex-direction:column;gap:12px;padding:30px clamp(18px,2vw,30px) 8px;border-left:1px solid rgba(143,176,255,.12)}
.w3-c:first-child{border-left:0;padding-left:0}
.w3-c::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:linear-gradient(90deg,#4d7dff,#8fb0ff 60%,transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--i) * .15s)}
.w3-cols.in .w3-c::before{transform:none}
.w3-n{font:600 calc(13px * var(--fs,1))/1 var(--f-b);letter-spacing:.08em;color:#4d7dff}
.w3-c h3{font:650 calc(clamp(20px,1.6vw,24px) * var(--fs,1))/1.15 var(--f-d);letter-spacing:-.025em;color:#fff}
.w3-c p{font-size:calc(15px * var(--fs,1));line-height:1.6;color:#a9b7e4}
.w3-c .w3-lede{font:600 calc(16px * var(--fs,1))/1.4 var(--f-d);color:#dbe4ff}
.w3-list{display:grid;gap:9px}
.w3-list li{position:relative;padding-left:16px;font-size:calc(14.5px * var(--fs,1));line-height:1.4;color:#cfd9ff}
.w3-list li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:1px;background:#4d7dff;transform:rotate(45deg)}
.w3-life{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.w3-life li{display:inline-flex;align-items:center;gap:6px;font-size:calc(13px * var(--fs,1));font-weight:600;color:#dbe4ff}
.w3-life li:not(:last-child)::after{content:"";width:14px;height:1px;background:#4d7dff}
.w3-pts{display:grid;gap:14px}
.w3-pts b{display:block;font:650 calc(15.5px * var(--fs,1))/1.3 var(--f-d);color:#fff}
.w3-pts span{display:block;margin-top:3px;font-size:calc(14px * var(--fs,1));line-height:1.5;color:#a9b7e4}
.w3-cta{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:600;font-size:calc(15px * var(--fs,1));color:#9fbaff}
.w3-cta .ic{width:17px;height:17px;transition:transform .25s}.w3-cta:hover .ic{transform:translateX(4px)}
.js .w3-cols:not(.in) .w3-c{opacity:0;transform:translateY(18px)}
.w3-c{transition:opacity .8s,transform .9s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--i) * .12s)}
@media(max-width:1000px){.w3-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.w3-c:nth-child(3){border-left:0;padding-left:0}.w3-c:nth-child(n+3){border-top:1px solid rgba(143,176,255,.12)}}
@media(max-width:600px){.w3-cols{grid-template-columns:1fr}.w3-c,.w3-c:nth-child(n){border-left:0;padding-left:0}.w3-c+.w3-c{border-top:1px solid rgba(143,176,255,.12)}}
html:not(.js) .w3-st .w{color:#fff}

/* ---------- contact page ---------- */
.ct-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:end}
.ct-quick{display:grid;gap:10px}
.ct-quick a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(143,176,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.ct-quick a:hover{background:rgba(255,255,255,.09);border-color:rgba(143,176,255,.45)}
.ct-quick small,.ct-meta small,.ct-jobs small{display:block;font-size:calc(12.5px * var(--fs,1));color:#8fa0d8}
.ct-quick b{display:block;margin-top:2px;font:600 calc(15.5px * var(--fs,1))/1.3 var(--f-d);color:#fff;overflow-wrap:anywhere}
.ct-body{padding-top:clamp(48px,6vw,90px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.ct-body .form{background:radial-gradient(ellipse 60% 40% at 100% 0,rgba(29,77,255,.25),transparent 70%),linear-gradient(170deg,#0d1546,#070b26);border:0;box-shadow:0 40px 80px -40px rgba(10,16,60,.6)}
.ct-aside{display:grid;gap:14px;position:sticky;top:calc(var(--nav-s,84px) + 20px)}
.ct-card{display:block;padding:clamp(20px,2vw,28px);border-radius:22px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.ct-card h2{font:650 calc(19px * var(--fs,1))/1.2 var(--f-d);letter-spacing:-.02em;margin-bottom:18px}
.ct-steps{display:grid;gap:18px;counter-reset:s}
.ct-steps li{position:relative;padding-left:46px}
.ct-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:600 calc(13px * var(--fs,1))/1 var(--f-b);color:#fff;background:linear-gradient(150deg,#4d7dff,#1d4dff)}
.ct-steps li:not(:last-child)::after{content:"";position:absolute;left:14.5px;top:34px;bottom:-16px;width:1px;background:var(--line)}
.ct-steps b{display:block;font:600 calc(15.5px * var(--fs,1))/1.3 var(--f-d)}
.ct-steps span{display:block;margin-top:3px;font-size:calc(14px * var(--fs,1));line-height:1.5;color:var(--mute)}
.ct-meta{display:grid;gap:14px}
.ct-meta>div{display:flex;align-items:center;gap:14px}
.ct-meta .ci-ic,.ct-quick .ci-ic{flex:none}
.ct-meta .ci-ic{color:var(--cobalt);background:rgba(29,77,255,.08);border-color:rgba(29,77,255,.2)}
.ct-meta small,.ct-jobs small{color:var(--mute)}
.ct-meta b{display:block;margin-top:2px;font:600 calc(15px * var(--fs,1))/1.35 var(--f-d)}
.ct-jobs{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--ink);border-color:var(--ink);color:#fff;transition:transform .25s}
.ct-jobs small{color:#a9b7e4}.ct-jobs b{display:block;margin-top:3px;font:600 calc(15.5px * var(--fs,1))/1.3 var(--f-d)}
.ct-jobs .ic{flex:none;width:20px;height:20px;transition:transform .25s}.ct-jobs:hover .ic{transform:translateX(4px)}
@media(max-width:960px){.ct-hero-grid,.ct-grid{grid-template-columns:1fr}.ct-aside{position:static}}
.w3-kick .tab path{stroke-dasharray:none!important;stroke-dashoffset:0!important;opacity:1!important}.w3-kick .tab{opacity:1!important}


/* ==========================================================================
   About: the expanding panels (same component as before, with About content and its own visuals)
   ========================================================================== */
.who-p{background:radial-gradient(ellipse 50% 60% at 15% 20%,rgba(29,77,255,.2),transparent 70%),#03050f;color:#e8eeff}
.who-p .sh h2{color:#fff}.who-p .sh p{color:#b3c1ea}
.spn-n{display:block;margin-bottom:8px;font:600 calc(12.5px * var(--fs,1))/1 var(--f-b);letter-spacing:.08em;color:#8fb0ff}
.spn-more p.sm{font-size:calc(14.5px * var(--fs,1));color:#a9b7e4}
.spn-more p b{color:#fff;font-weight:650}
.spn-caps.pts{grid-template-columns:1fr;gap:12px}
.spn-caps.pts li b{display:block;font:650 calc(15px * var(--fs,1))/1.3 var(--f-d);color:#fff}
.spn-caps.pts li{color:#a9b7e4;font-size:calc(13.5px * var(--fs,1))}
.spn-caps.life{grid-template-columns:repeat(3,auto);justify-content:start}
/* About visuals (430×300 box): isometric glass objects; real screens only in "What we build" */
.ab-art{position:relative;width:430px;height:300px}
/* 3D renders (who we are, how we deliver, why Smartware): rendered offline with three.js, transparent WebP */
.ab-3d{display:grid;place-items:center}
.ab-3d::before{content:"";position:absolute;inset:14% 16% 4%;border-radius:50%;background:radial-gradient(ellipse,rgba(77,125,255,.4),transparent 70%);filter:blur(12px)}
.ab-3d img{position:relative;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,12,.45));transition:transform 1s cubic-bezier(.2,.75,.25,1)}
.spn:not(.on) .ab-3d img{transform:translateY(10px) scale(.96)}
/* 02 what we build: real screens on a desk */
.ab-mosaic .t{position:absolute;overflow:hidden;border-radius:8px;background:#16205a;box-shadow:0 0 0 1px rgba(170,195,255,.3),0 24px 40px -16px rgba(0,0,10,.8);transition:transform .8s cubic-bezier(.2,.75,.25,1)}
.ab-mosaic .t img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.ab-mosaic .t:not(.ph){width:210px;height:132px}
.ab-mosaic .ph{width:74px;height:160px;border-radius:12px;border:3px solid #07080b}
.ab-what .t0{left:20px;top:40px;transform:rotate(-4deg)}.ab-what .t2{left:200px;top:10px;transform:rotate(3deg)}.ab-what .t4{left:140px;top:150px;transform:rotate(-1deg);z-index:2}
.ab-what .t1{left:40px;top:150px;transform:rotate(-8deg);z-index:3}.ab-what .t3{left:340px;top:120px;transform:rotate(7deg);z-index:3}
.spn.on .ab-what .t0{transform:rotate(-2deg) translateY(-6px)}.spn.on .ab-what .t3{transform:rotate(4deg) translateY(-8px)}
@media(max-width:900px){.ab-art{width:100%;max-width:340px;height:240px;margin-inline:auto;transform:scale(.8);transform-origin:50% 0}.spn-caps.life{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   Services: a bento of four cards; each shows the real work built with that service
   ========================================================================== */
.svb{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(400px,auto);gap:14px}
.svb-c{position:relative;overflow:hidden;isolation:isolate;display:block;border-radius:28px;color:#e8eeff;
  background:radial-gradient(ellipse 70% 60% at 80% 100%,rgba(29,77,255,.45),transparent 70%),linear-gradient(165deg,rgba(13,22,78,.92),rgba(4,8,30,.97) 65%),#061038 url(../media/images/facets.svg) center/700px auto;
  border:1px solid rgba(143,176,255,.16);box-shadow:0 40px 80px -50px rgba(10,16,60,.8);transition:transform .45s cubic-bezier(.2,.75,.25,1),border-color .35s,box-shadow .45s}
.svb-c:hover{transform:translateY(-4px);border-color:rgba(143,176,255,.45);box-shadow:0 50px 90px -45px rgba(29,77,255,.55)}
.svb-c.c1{grid-column:1/8}.svb-c.c2{grid-column:8/13;grid-row:1/3}.svb-c.c3{grid-column:1/5}.svb-c.c4{grid-column:5/8}
.svb-t{position:relative;z-index:2;padding:clamp(24px,2.4vw,34px)}
.svb-c.c1 .svb-t{max-width:46%}
.svb-n{display:block;margin-bottom:10px;font:600 calc(12.5px * var(--fs,1))/1 var(--f-b);letter-spacing:.08em;color:#8fb0ff}
.svb-t h3{font:650 calc(clamp(23px,2.1vw,32px) * var(--fs,1))/1.05 var(--f-d);letter-spacing:-.035em;color:#fff}
.svb-t p{margin-top:10px;font-size:calc(15px * var(--fs,1));line-height:1.5;color:#b3c1ea;max-width:30em}
.svb-caps{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.svb-caps li{padding:6px 11px;border-radius:99px;font-size:calc(12.5px * var(--fs,1));font-weight:550;color:#dbe4ff;background:rgba(255,255,255,.06);border:1px solid rgba(143,176,255,.22)}
.svb-go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:600;font-size:calc(14.5px * var(--fs,1));color:#9fbaff}
.svb-go .ic{width:16px;height:16px;transition:transform .25s}.svb-c:hover .svb-go .ic{transform:translateX(4px)}
.svb-c{display:flex;flex-direction:column}
.svb-v{position:relative;z-index:1;margin-top:auto;padding:8px clamp(20px,2.2vw,30px) clamp(20px,2.2vw,30px);pointer-events:none;transition:transform .7s cubic-bezier(.2,.75,.25,1)}
.svb-c:hover .svb-v{transform:translateY(-6px)}
.svb-v .fx-comp{padding-bottom:9%}
.svb-c.c1{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center}
.svb-c.c1 .svb-t{max-width:none}
.svb-c.c1 .svb-v{margin:0;padding:clamp(20px,2.2vw,30px) clamp(20px,2.2vw,30px) clamp(20px,2.2vw,30px) 0}
.svb .svb-c.c2 .fx-trio>.fx-phone{width:min(36%,240px)}
.svb-c.c2 .svb-v{margin-block:auto;padding-top:20px}
.svb .svb-c.c4 .fx-trio .t-c{width:min(42%,150px);transform:none}
@media(max-width:1100px){.svb-c.c1{grid-template-columns:1fr}.svb-c.c1 .svb-v{padding:8px clamp(20px,2.2vw,30px) clamp(20px,2.2vw,30px)}}
@media(max-width:900px){
  .svb{grid-template-columns:1fr;grid-auto-rows:auto}
  .svb-c.c1,.svb-c.c2,.svb-c.c3,.svb-c.c4{grid-column:auto;grid-row:auto;min-height:0}
  .svb-c.c1 .svb-t{max-width:none}
}

/* ==========================================================================
   About: the hub. The Smartware piece in the middle, four cards around it, joined by lines of light.
   ========================================================================== */
.hub{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,22vw,300px) minmax(0,1fr);grid-template-areas:"a core b" "c core d";gap:clamp(18px,2.4vw,34px) clamp(24px,3vw,44px);align-items:stretch}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.hub-lines path{fill:none;stroke:rgba(143,176,255,.22);stroke-width:1.5;stroke-linecap:round;transition:stroke .4s}
.hub-lines path.on{stroke-width:2}
/* the centre: a calm tile with the logo (deliberately not a glowing circle, to stay apart from the hero) */
.hub-core{grid-area:core;position:relative;z-index:1;justify-self:center;align-self:center;display:grid;place-items:center;width:clamp(116px,10vw,140px);aspect-ratio:1;border-radius:32px;
  overflow:hidden;background:var(--navy) url(../media/images/facets.svg) center/360px auto;border:1px solid rgba(160,190,255,.28);box-shadow:0 30px 60px -28px rgba(29,77,255,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.hub-core::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(90,140,255,.45),transparent 62%)}
.hub-core img{position:relative;width:50%;height:auto;filter:drop-shadow(0 0 14px rgba(160,195,255,.55))}
.hub-card{position:relative;z-index:1;padding:clamp(22px,2.2vw,30px);padding-inline-end:clamp(26px,2.6vw,40px);border-radius:24px;color:#e8eeff;cursor:pointer;outline:none;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(143,176,255,.2);transition:background .45s ease,border-color .45s ease,box-shadow .45s ease}
.hub-card.c1{grid-area:a}.hub-card.c2{grid-area:b}.hub-card.c3{grid-area:c}.hub-card.c4{grid-area:d}
.hub-card:hover{border-color:rgba(143,176,255,.4)}
.hub-card:focus-visible{box-shadow:0 0 0 3px rgba(126,163,255,.8)}
.hub-card.on{background:linear-gradient(135deg,#1d4dff 0%,#3b78ff 50%,#58b6ff 100%);border-color:transparent;box-shadow:0 30px 60px -36px rgba(29,77,255,.7)}
.hub-n{display:block;font:650 12.5px/1 var(--f-b);letter-spacing:.08em;color:#8fb0ff;margin-bottom:10px}
.hub-card.on .hub-n{color:#dbe7ff}
.hub-card h3{font:650 clamp(21px,1.8vw,27px)/1.15 var(--f-d);letter-spacing:-.03em;color:#fff;margin-bottom:10px}
.hub-card p{font-size:15px;line-height:1.6;color:#b3c1ea}
.hub-card.on p{color:#eef3ff}
.hub-card p b{color:#fff}
.hub-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:14px}
.hub-chips li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.35;color:#dbe4ff}
.hub-chips li::before{content:"";position:absolute;left:0;top:.45em;width:6px;height:6px;border-radius:2px;background:#4d7dff;transform:rotate(45deg)}
.hub-card.on .hub-chips li::before{background:#fff}
.hub-card.on .hub-chips li{color:#fff}
.hub-life{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:14px}
.hub-life li{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:#dbe4ff}
.hub-life li:not(:last-child)::after{content:"";width:16px;height:1px;margin:0 8px;background:currentColor;opacity:.5}
.hub-card.on .hub-life li{color:#fff}
.hub-pts{display:grid;gap:10px}
.hub-pts b{display:block;font:650 15.5px/1.3 var(--f-d);color:#fff}
.hub-pts span{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:#b3c1ea}
.hub-card.on .hub-pts span{color:#eef3ff}
/* the node on the edge that faces the hub */
.hub-node{position:absolute;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border-radius:50%;color:#9fb8ff;background:#0d1745;border:1px solid rgba(143,176,255,.35);transition:background .45s,color .45s,border-color .45s}
.hub-node .ic{width:19px;height:19px}
.hub-card.c1 .hub-node,.hub-card.c3 .hub-node{right:-22px}
.hub-card.c2 .hub-node,.hub-card.c4 .hub-node{left:-22px}
.hub-card.c1,.hub-card.c3{padding-right:46px}.hub-card.c2,.hub-card.c4{padding-left:46px}
.hub-card.on .hub-node{color:#1d4dff;background:#fff;border-color:#fff}

@media(max-width:560px){.hub-chips{grid-template-columns:1fr}}
@media(max-width:1023px){
  .hub{grid-template-columns:1fr;grid-template-areas:"core" "a" "b" "c" "d";gap:16px}
  .hub-core{width:104px;border-radius:26px;margin-bottom:6px}
  .hub-lines{display:none}
  .hub-card.c1,.hub-card.c2,.hub-card.c3,.hub-card.c4{padding:22px 22px 22px 70px}
  .hub-card .hub-node,.hub-card.c1 .hub-node,.hub-card.c2 .hub-node,.hub-card.c3 .hub-node,.hub-card.c4 .hub-node{left:16px;right:auto;top:24px;margin-top:0;width:40px;height:40px}
  .hub-card.on{transform:none}
}