/* homepage additions */
.intro20 .fw li a{display:grid;justify-items:center;gap:1px;color:inherit}.intro20 .fw li:has(a):hover{border-color:var(--navy)}
.grid9 .tile .mk i{-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}
/* section eyebrows reuse .kick, which the scene styles position absolutely: put them back in their sections */
.intro20 .kick,.s20 .kick{position:static;display:block}
/* small phones: the shift-start desks get the room they need, and long (translated) tasks wrap instead of leaving the card */
@media(max-width:400px){body .t19d .cols{padding:12px 12px 16px 40px}body .t19d .col{grid-template-columns:60px minmax(0,1fr);gap:4px 8px}body .t19d .col .fig{width:60px}body .t19d .slot,body .t19d .desk,body .t19d .toast{min-width:0;max-width:100%}body .t19d .desk span{white-space:normal;line-height:1.25}body .t19d .desk span::after{top:.62em}body .t19d .top span+span{display:none}body .t19d .pill2{max-width:calc(100% - 24px);white-space:normal;line-height:1.3}}
/* the 3D story: one screen, one column. Headline, team tabs, the drawing (as big as the space left), one control bar. */
html{overscroll-behavior-y:none}body .stack.centered .stage{position:relative;height:100svh;display:grid;grid-template-rows:var(--st-top) auto auto minmax(0,1fr) auto;justify-items:center;--st-top:calc(65px + clamp(12px,3svh,36px));--st-pad:clamp(14px,2.4svh,26px)}body .stack.centered .stage>.cap{grid-row:2;position:relative;left:auto;top:auto;right:auto;transform:none;width:min(760px,calc(100% - 2*var(--pad)));max-width:none;text-align:center;}body .stack.centered .cap h3{font-size:clamp(28px,min(3.4vw,5.2svh),46px);margin:0 0 8px;line-height:1.05}body .stack.centered .cap p{margin:0 auto;max-width:560px;font-size:clamp(14px,1.9svh,16.5px);line-height:1.45;min-height:2.9em}body .stack.centered .stage>.dtabs{grid-row:3;position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;margin-top:var(--st-pad)}body .stack.centered .dtabs button{font-size:13.5px;padding:8px 16px}body .stack.centered .stage>.scene3d{grid-row:4;position:relative;inset:auto;width:100%;height:100%;min-height:0;container-type:size;touch-action:pan-y}body .stack.centered .scene3d .draw{position:absolute;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);aspect-ratio:1/1;width:min(calc(100cqh - 12px),calc(100cqw - 180px),720px);height:auto}body .stack.centered .stage>.sctl{grid-row:5;position:relative;display:flex;align-items:center;gap:14px;padding:6px 0 var(--st-pad)}body .stack.centered .sctl .dots{position:static;transform:none;left:auto;bottom:auto;display:flex;gap:12px}body .stack.centered .stage>.kick,body .stack.centered .stage>.big{display:none}/* progress dots: the active one fills up while its step plays; each dot is a 44px tap target */
body .simple .dots i{cursor:pointer;position:relative;width:10px;height:10px;border-radius:5px;overflow:visible}body .simple .dots i.on{width:40px;background:rgba(255,255,255,.28)}body .simple .dots i.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--e,0)*100%);border-radius:5px;background:#fff}body .stack.paused .dots i.on::before{width:100%}body .simple .dots i::after{content:"";position:absolute;inset:-17px -6px}body .simple .dots i:focus-visible{outline:2px solid #7FB8F2;outline-offset:4px}/* buttons: previous and next (beside the drawing on wide screens, in the bar on narrow ones), pause */
body .stack .sprev,body .stack .snext,body .stack .spause{position:relative;flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);cursor:pointer;display:grid;place-items:center;color:#fff;transition:background .2s,transform .2s}body .stack .sprev:hover,body .stack .snext:hover,body .stack .spause:hover{background:rgba(255,255,255,.18)}body .stack .sprev:focus-visible,body .stack .snext:focus-visible,body .stack .spause:focus-visible{outline:2px solid #7FB8F2;outline-offset:3px}body .stack .sprev i,body .stack .snext i{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor}body .stack .snext i{transform:translateX(-2px) rotate(45deg)}body .stack .sprev i{transform:translateX(2px) rotate(-135deg)}body .stack .spause{margin-left:10px}body .stack .spause i{width:10px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff}body .stack.paused .spause i{width:0;height:0;border:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}body .stack .side{position:absolute;z-index:5;top:50%;width:52px;height:52px;margin-top:-26px;background:rgba(255,255,255,.1)}body .stack .side i{width:13px;height:13px}body .stack .sprev.side{left:calc(50% - min(calc(100cqh - 12px),calc(100cqw - 180px),720px)/2 - 72px)}body .stack .snext.side{right:calc(50% - min(calc(100cqh - 12px),calc(100cqw - 180px),720px)/2 - 72px)}body .stack .snext.side:hover{transform:translateX(3px)}body .stack .sprev.side:hover{transform:translateX(-3px)}body .stack .sctl .sprev,body .stack .sctl .snext{display:none}/* narrow screens: the drawing takes the full width; previous and next move into the bar */
@media(max-width:759px){body .stack.centered .scene3d .draw{width:min(calc(100cqh - 8px),calc(100cqw - 24px))}body .stack .side{display:none}body .stack .sctl .sprev,body .stack .sctl .snext{display:grid}body .stack.centered .stage{--st-top:calc(56px + 14px)}body .stack.centered .dtabs button{font-size:12px;padding:7px 11px}body .stack .sctl{gap:10px}body .stack.centered .cap p{min-height:4.35em}body .stack.centered .cap h3{min-height:2.1em;display:flex;align-items:flex-end;justify-content:center}}/* short screens (landscape phones, small laptops): tighter headline, no second line */
@media(max-height:560px){body .stack.centered .cap p{display:none}body .stack.centered .cap h3{font-size:24px}}/* phones: the client logos pass faster; the framework chips become one row that scrolls sideways instead of five rows */
@media(max-width:700px){body .logos .track{animation-duration:14s}}
@media(max-width:600px){body .intro20{padding-bottom:40px}body .intro20 .fw{margin-top:22px;width:100%}body .intro20 .fw small{padding:0 var(--pad)}body .intro20 .fw ul{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x proximity;gap:8px;width:100%;padding:2px var(--pad) 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}body .intro20 .fw ul::-webkit-scrollbar{display:none}body .intro20 .fw li{flex:none;scroll-snap-align:start;padding:8px 14px}body .intro20 .fw span{font-size:11px;white-space:nowrap}}
/* handover tags: one centered column below the voice wave, so the workers faces stay visible; long labels never leave the card */
.lc .ov>span.fl:nth-of-type(1){left:50%!important;top:42%!important}
.lc .ov>span.fl:nth-of-type(2){left:50%!important;top:53%!important}
.lc .ov>span.fl:nth-of-type(3){left:50%!important;top:64%!important}
.lc .ov>span.fl{max-width:94%;white-space:nowrap}
html:not([lang=en]) .lc .fl{font-size:10px;padding:4px 8px 4px 7px;gap:4px}
/* ================================================================ MEGA MENU */
nav .left .mmb{display:none;background:none;border:0;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;padding:22px 0;align-items:center;gap:5px}
nav .left .mmb::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.5;transition:transform .2s}
nav .left .mmb[aria-expanded=true]{color:var(--blue)}
nav .left .mmb[aria-expanded=true]::after{transform:translateY(1px) rotate(-135deg)}
nav .left .mmb.cur{color:var(--blue)}
@media(min-width:960px){nav .left .mmb{display:inline-flex}nav .left{gap:24px}}
@media(min-width:960px) and (max-width:1120px){nav .left{gap:16px}nav .left .mmb{font-size:13.5px}}
nav.mmopen{background:#fff;border-color:var(--line)}
.mm{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 40px 70px -20px rgba(14,26,43,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.mm.on{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
.mm .wrap{display:flex;gap:32px;padding:26px 0 30px;align-items:stretch}
.mcol{flex:1;min-width:0}.mcol.w2{flex:2}.mcol.w3{flex:3}
.mm h6{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px 10px}
.mg2{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.mg3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 14px}
.ml{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:12px;transition:background .15s}
.ml:hover{background:var(--paper)}
.ml b{display:block;font-size:14px;font-weight:500;color:var(--ink);line-height:1.3}
.ml small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.mt{position:relative;flex:none;width:44px;height:44px;border-radius:10px;overflow:hidden;background:radial-gradient(110% 90% at 50% 40%,#13284A,#081222 72%)}
.mt .mk{position:absolute;inset:5px;--c:#8FA7C7;display:block}
.mt .mk i{display:block;transition:background .2s}
.ml:hover .mt .mk i,.rich a:hover .mt .mk i{background:#3DDC97}
.mbdg{flex:none;min-width:74px;height:44px;display:grid;place-items:center;padding:0 8px;border:1.5px solid var(--line);border-radius:10px;font-size:12.5px;font-weight:600;color:var(--navy);transition:border-color .15s}
.ml:hover .mbdg{border-color:#3DDC97}
.mf{flex:0 0 280px;display:grid;align-content:start;gap:10px;background:var(--navy);color:#fff;border-radius:16px;padding:22px;position:relative;overflow:hidden}
.mf::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(transparent,#000);-webkit-mask-image:linear-gradient(transparent,#000)}
.mf>*{position:relative}
.mf .mfk{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#3DDC97}
.mf b{font-size:19px;font-weight:400;letter-spacing:-.02em;line-height:1.2}
.mf small{font-size:13px;color:#AFC3DA}
.mf .pill{justify-self:start;margin-top:8px}
@media(max-width:959px){.mm{display:none}}
nav .drawer details{border-bottom:1px solid var(--line)}
nav .drawer summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:17px;cursor:pointer}
nav .drawer summary::-webkit-details-marker{display:none}
nav .drawer summary::after{content:"+";font-size:20px;color:var(--muted)}
nav .drawer details[open] summary::after{content:"–"}
nav .drawer details div{display:grid;padding-bottom:10px}
nav .drawer details a{padding:9px 0 9px 12px;border:0;font-size:15px;color:#3C4552}
nav .drawer .pill{padding:0 6px 0 16px}

.mt .mk i{-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}

.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.ferr{color:#D64545;font-size:13.5px;margin:0}.f20 .rep .ferr{color:#FF8A7A}
/* language menu */
nav .lng{position:relative;font-size:14px}
nav .lng summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:44px;padding:0 2px;color:var(--ink);user-select:none}
nav .lng summary::-webkit-details-marker{display:none}
nav .lng summary svg{opacity:.7}
nav .lng summary:hover svg,nav .lng[open] summary svg{opacity:1}
nav .lng summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.5;transition:transform .2s}
nav .lng[open] summary::after{transform:translateY(1px) rotate(-135deg)}
nav .lng div{position:absolute;right:-8px;top:calc(100% + 4px);min-width:180px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 24px 50px -18px rgba(14,26,43,.25);display:grid;z-index:70}
nav .lng div a{display:flex!important;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:#3C4552;font-size:14px}
nav .lng div a b{font:600 11px Geist,sans-serif;letter-spacing:.06em;color:var(--muted);width:20px}
nav .lng div a:hover{background:#F2F3F0;color:var(--ink)}
nav .lng div a.on{color:var(--ink);font-weight:500}
nav .lng div a.on::after{content:"✓";margin-left:auto;color:#1F9D6B;font-size:13px}
nav .drawer .dlng{display:flex;align-items:center;gap:6px;margin-top:14px;color:var(--muted)}
nav .drawer .dlng a{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px}
nav .drawer .dlng a.on{background:var(--navy);border-color:var(--navy);color:#fff}
@media(max-width:959px){nav .right .lng{display:none}}
/* phones: every link and button gets at least a 24px-tall target, and nothing reads smaller than 11px */
@media(max-width:959px){
.announce a{display:inline-block;padding:4px 0}
nav .logo{display:inline-flex;align-items:center;min-height:44px}
nav .right a{display:inline-flex;align-items:center;min-height:44px}
.more{display:inline-flex;align-items:center;min-height:32px}
body .f20 ul li a,body .f20 .tr20 a,body .f20 .bottom nav a,body .f20 .bottom nav button{display:inline-block;padding:4px 0}
.tbl td a{display:inline-block;padding:3px 0}
body .f20 li em{font-size:11px}
body .s20d .src,body .s20 .src::before{font-size:11px}
body .intro20 .fw span{font-size:11px}
}
[id]{scroll-margin-top:84px}