/* Image-led section transitions and interaction states. */
:root{--scroll-y:0;--ease-out:cubic-bezier(.16,1,.3,1)}
body{background:#f6f9fc}
.hero-corporate,.service-flow,.process-section,.products,.needs-section{position:relative;isolation:isolate;overflow:clip;background:#f6f9fc}
.hero-corporate{background:#dfeaf2 url("images/office-v1.png") center right/cover no-repeat}
.hero-corporate::before{position:absolute;z-index:-1;inset:0;content:"";background:linear-gradient(90deg,rgba(247,251,254,.99) 0%,rgba(247,251,254,.94) 36%,rgba(247,251,254,.63) 58%,rgba(15,55,88,.12) 100%)}
.hero-corporate .hero-copy{background:transparent!important}
.hero-corporate .architecture-panel{position:relative;background:linear-gradient(135deg,rgba(15,58,96,.95),rgba(24,91,141,.86))!important;box-shadow:-22px 0 46px rgba(9,39,65,.15);backdrop-filter:blur(4px)}
.architecture-panel::after{position:absolute;inset:0;z-index:-1;content:"";opacity:.26;background-image:linear-gradient(rgba(209,236,255,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(209,236,255,.24) 1px,transparent 1px);background-size:34px 34px}
.service-flow,.products,.needs-section{background:#f6f9fc!important}
.service-flow::before,.products::before,.needs-section::before,.process-section::before{position:absolute;z-index:-1;content:"";right:0;top:0;width:min(51vw,1030px);height:clamp(310px,32vw,630px);opacity:0;transform:translate3d(0,calc(var(--scene-shift,0px) * .35),0) scale(1.07);transition:opacity .9s ease,transform 1.5s var(--ease-out);will-change:transform;pointer-events:none}
.service-flow::before{background:linear-gradient(90deg,#f6f9fc 0%,rgba(246,249,252,.16) 48%,rgba(246,249,252,.06)),url("images/infrastructure-v1.png") center/cover;clip-path:polygon(23% 0,100% 0,100% 100%,0 100%)}
.products::before{display:block!important;background:linear-gradient(90deg,#f6f9fc 0%,rgba(246,249,252,.15) 54%,rgba(246,249,252,.04)),url("images/software-v1.png") center/cover;clip-path:polygon(23% 0,100% 0,100% 100%,0 100%)}
.needs-section::before{background:linear-gradient(90deg,#f6f9fc 0%,rgba(246,249,252,.15) 52%,rgba(246,249,252,.04)),url("images/scenarios-v1.png") center/cover;clip-path:polygon(23% 0,100% 0,100% 100%,0 100%)}
.process-section{background:#edf3f8!important}
.process-section::before{height:100%;width:min(45vw,900px);background:linear-gradient(90deg,#edf3f8 0%,rgba(237,243,248,.22) 56%,rgba(237,243,248,.06)),url("images/workflow-v1.png") center/cover;clip-path:polygon(29% 0,100% 0,100% 100%,0 100%)}
.is-scene-visible::before{opacity:1;transform:translate3d(0,var(--scene-shift,0px),0) scale(1)}
.hero-corporate .hero-copy,.architecture-panel,.service-flow .container,.process-section .container,.products .container,.needs-section .container{position:relative;z-index:1}
.service-flow .split-heading,.products .product-heading,.needs-section .split-heading{min-height:clamp(250px,25vw,500px);padding-top:clamp(52px,7vw,130px);margin-bottom:0!important;align-content:start}
.service-flow .split-heading>div,.products .product-heading>div:first-child,.needs-section .split-heading>div{padding:clamp(18px,2vw,38px);max-width:min(670px,56%);background:rgba(249,252,254,.93);border-top:3px solid var(--blue);box-shadow:0 16px 38px rgba(19,55,84,.09);backdrop-filter:blur(10px)}
.service-flow .split-heading>p,.products .product-heading>p,.needs-section .split-heading>p{width:min(550px,48%);background:rgba(249,252,254,.92)!important;box-shadow:0 12px 28px rgba(19,55,84,.07);backdrop-filter:blur(10px)}
.service-flow .flow-track,.product-layout,.needs-grid{position:relative;z-index:2;box-shadow:0 26px 60px rgba(20,54,81,.1)}
.process-copy,.process-timeline{box-shadow:0 22px 52px rgba(20,54,81,.1);backdrop-filter:blur(7px)}
.process-copy{transition:transform .5s var(--ease-out),box-shadow .5s ease}
.process-section.is-scene-visible .process-copy{transform:translateY(-10px);box-shadow:0 30px 60px rgba(20,54,81,.14)}

/* Scroll progression gives each module a visible working state. */
.flow-track{--flow-progress:0;perspective:1000px}
.flow-step{transform-origin:center bottom;transition:transform .65s var(--ease-out),box-shadow .65s ease,border-color .45s ease,background .45s ease!important}
.flow-step.is-active{background:#fff;transform:translateY(-18px) scale(1.025);box-shadow:0 26px 52px rgba(16,72,123,.18)!important}
.flow-step.is-active::before{position:absolute;top:0;right:0;left:0;height:3px;content:"";background:linear-gradient(90deg,var(--blue),#83d0ff);animation:stage-sweep .9s var(--ease-out) both}
@keyframes stage-sweep{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
.process-timeline li{position:relative;transition:transform .55s var(--ease-out),background .45s ease,box-shadow .45s ease!important}
.process-timeline li.is-active{padding-left:12px;background:rgba(236,247,255,.78);box-shadow:inset 3px 0 0 var(--blue)}
.needs-grid article{transition:transform .55s var(--ease-out),box-shadow .55s ease,background .4s ease!important}
.needs-grid article.is-active{z-index:1;background:#fff;transform:translateY(-12px);box-shadow:0 22px 44px rgba(16,72,123,.14)}
.case-tab{transition:color .36s ease,background .36s ease,padding-left .42s var(--ease-out)!important}
.case-tab.active{padding-left:29px}
.case-detail.active .case-copy{animation:case-copy-lift .72s var(--ease-out) both}
@keyframes case-copy-lift{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* Fine-pointer interactions are deliberately restrained and reversible. */
@media (hover:hover) and (pointer:fine){
  [data-magnetic]{transition:transform .26s var(--ease-out),box-shadow .26s ease!important;will-change:transform}
  [data-magnetic].is-magnetized{box-shadow:0 17px 30px rgba(12,75,126,.25)}
  .architecture-node{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease-out)}
  .architecture-node:hover{transform:translateY(-8px)}
  .needs-grid article:hover{transform:translateY(-12px) perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))!important}
  .case-visual:hover{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))!important}
}
@media(max-width:960px){
 .service-flow::before,.products::before,.needs-section::before{width:70vw;height:360px;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
 .process-section::before{width:68vw;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
 .service-flow .split-heading>div,.products .product-heading>div:first-child,.needs-section .split-heading>div{max-width:72%}
}
@media(max-width:760px){
 .hero-corporate{background-position:64% center}.hero-corporate::before{background:rgba(247,251,254,.9)}
 .service-flow::before,.products::before,.needs-section::before,.process-section::before{width:100%;height:315px;opacity:.24!important;clip-path:none;transform:none!important}
 .process-section::before{height:100%;opacity:.12!important}
 .service-flow .split-heading,.products .product-heading,.needs-section .split-heading{min-height:270px;padding-top:36px}
 .service-flow .split-heading>div,.products .product-heading>div:first-child,.needs-section .split-heading>div,.service-flow .split-heading>p,.products .product-heading>p,.needs-section .split-heading>p{max-width:100%;width:100%}
 .flow-step.is-active,.needs-grid article.is-active{transform:translateY(-6px) scale(1.01)}
}
@media(prefers-reduced-motion:reduce){
 .service-flow::before,.products::before,.needs-section::before,.process-section::before{opacity:1;transform:none;transition:none}
 .flow-step,.process-timeline li,.needs-grid article,.case-tab{transition:none!important;transform:none!important}
 .flow-step.is-active,.needs-grid article.is-active{transform:none}
}

/* Layout safeguards and a fuller product-delivery brief. */
.service-flow .split-heading{grid-template-columns:minmax(0,1fr) minmax(0,.72fr);column-gap:clamp(36px,6vw,110px);padding-bottom:clamp(34px,4vw,76px)}
.service-flow .split-heading>p{align-self:end;padding:clamp(18px,1.8vw,32px);line-height:1.8}
.flow-track{grid-template-columns:repeat(4,minmax(0,1fr))}
.flow-step{min-width:0;overflow-wrap:anywhere}

.products .product-heading{min-height:clamp(260px,21vw,410px);grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);align-items:end;gap:clamp(32px,6vw,112px);padding-bottom:clamp(30px,3.3vw,66px)}
.products .product-heading>div{max-width:min(680px,100%)}
.product-heading-copy{align-self:end;max-width:540px;padding:22px 24px 20px;border-left:3px solid var(--blue);background:rgba(249,252,254,.9);box-shadow:0 16px 34px rgba(19,55,84,.08);backdrop-filter:blur(10px)}
.product-heading-copy p{margin:0;color:#445e76;font-size:clamp(.94rem,.9vw,1.14rem);line-height:1.85}
.product-heading-copy span{display:block;margin-top:14px;color:var(--blue);font-size:.68rem;font-weight:800;letter-spacing:.12em}
.product-scope{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));margin:0 0 clamp(24px,3vw,54px);border-top:3px solid var(--blue);background:rgba(255,255,255,.96);box-shadow:0 20px 48px rgba(20,54,81,.1)}
.scope-lead,.product-scope article{min-width:0;padding:clamp(24px,2.3vw,42px)}
.scope-lead{background:linear-gradient(135deg,#153e68,#1f6097);color:#fff}
.scope-kicker{margin:0 0 10px;color:#9ed5ff;font-size:.7rem;font-weight:800;letter-spacing:.13em}
.scope-lead h3{margin:0;font-size:clamp(1.15rem,1.35vw,1.85rem);line-height:1.5}
.scope-lead>p:last-child{margin:13px 0 0;color:#d8eafa;font-size:.88rem;line-height:1.8}
.product-scope article{border-left:1px solid #dce6ee;background:#fff;transition:transform .35s var(--ease-out),background .35s ease,box-shadow .35s ease}
.product-scope article:hover{position:relative;z-index:1;background:#f7fbff;transform:translateY(-7px);box-shadow:0 16px 28px rgba(18,72,120,.12)}
.product-scope article span{color:var(--blue);font-size:.72rem;font-weight:800}
.product-scope article h3{margin:19px 0 8px;color:var(--navy);font-size:1.04rem;line-height:1.45}
.product-scope article p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.75}
.products .product-layout{box-shadow:0 28px 62px rgba(20,54,81,.13)}
.case-selector{background:#f6f9fc}
.case-tab{min-height:92px}
.case-copy{padding:clamp(34px,3vw,60px)}
.case-copy h3{font-size:clamp(1.6rem,1.7vw,2.25rem)}
.case-copy>p:not(.case-type){max-width:42em;line-height:1.85}
.case-tags{margin-top:25px}

@media(max-width:1200px) and (min-width:761px){
 .service-flow .split-heading{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);column-gap:42px}
 .flow-track{grid-template-columns:repeat(2,minmax(0,1fr))}
 .flow-track::before,.flow-track::after{display:none}
 .flow-step,.flow-step:first-child{min-height:300px;padding:clamp(28px,3vw,48px);border-bottom:1px solid var(--line)}
 .flow-step:nth-child(2){border-right:0}
 .flow-step:nth-child(n+3){border-bottom:0}
 .products .product-heading{grid-template-columns:1fr .82fr;gap:40px}
 .product-scope{grid-template-columns:1.15fr 1fr 1fr}
 .product-scope article:last-child{grid-column:2 / 4;border-top:1px solid #dce6ee}
}
@media(max-width:760px){
 .service-flow .split-heading{padding-bottom:34px}
 .service-flow .split-heading>p{padding:18px 20px}
 .products .product-heading{display:grid;grid-template-columns:1fr;min-height:0;padding-bottom:32px;gap:18px}
 .product-heading-copy{max-width:100%}
 .product-scope{grid-template-columns:1fr;margin-bottom:28px}
 .product-scope article{border-top:1px solid #dce6ee;border-left:0}
 .scope-lead,.product-scope article{padding:24px 22px}
 .case-tab{min-height:66px}
}

/* Product area: content anchors the left-centre; photography supports it from the right. */
.products::before{width:min(45vw,920px);height:clamp(260px,25vw,490px);clip-path:polygon(13% 0,100% 0,100% 100%,0 100%)}
.products .product-heading{display:grid;grid-template-columns:minmax(0,720px) minmax(0,1fr);grid-template-areas:"title visual" "copy visual";justify-content:start;align-content:center;align-items:start;min-height:clamp(280px,17vw,360px);gap:0;padding-top:clamp(42px,4vw,78px);padding-bottom:clamp(30px,3vw,58px)}
.products .product-heading>div:first-child{grid-area:title;width:min(100%,650px);max-width:650px;margin-left:clamp(0px,7vw,150px)}
.products .product-heading-copy{grid-area:copy;align-self:start;width:min(100%,590px);max-width:590px;margin:20px 0 0 clamp(0px,7vw,150px);padding:18px 22px;border-top:0;border-left:3px solid var(--blue);box-shadow:0 13px 30px rgba(19,55,84,.08)}
.products .product-heading::after{grid-area:visual;align-self:stretch;content:""}
.product-scope{margin-top:0}

@media(max-width:960px){
 .products::before{width:57vw;height:330px;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}
 .products .product-heading{grid-template-columns:minmax(0,600px) minmax(0,1fr);min-height:300px}
 .products .product-heading>div:first-child,.products .product-heading-copy{margin-left:clamp(0px,4vw,58px)}
}
@media(max-width:760px){
 .products::before{width:100%;height:300px;clip-path:none}
 .products .product-heading{display:grid;grid-template-columns:1fr;grid-template-areas:"title" "copy";min-height:0;padding-top:36px;padding-bottom:32px}
 .products .product-heading>div:first-child,.products .product-heading-copy{width:100%;max-width:100%;margin-left:0}
 .products .product-heading-copy{margin-top:18px}
 .products .product-heading::after{display:none}
}

/* Responsive baseline: a component must never retain a desktop-width minimum. */
html,body{max-width:100%;overflow-x:clip}
img,svg,video{max-width:100%}
.container,.hero-grid>*,.split-heading>*,.flow-track>*,.process-grid>*,.product-layout>*,.product-scope>*,.needs-grid>*,.contact-inner>*{min-width:0}

/* Phones read the service sequence as an ordered vertical story, not four squeezed columns. */
@media(max-width:760px){
 .flow-track{grid-template-columns:minmax(0,1fr)}
 .flow-track::before,.flow-track::after{display:none}
 .flow-step,.flow-step:first-child,.flow-step:nth-child(2),.flow-step:nth-child(n+3){min-height:0;padding:28px 24px;border-right:0;border-bottom:1px solid var(--line)}
 .flow-step:last-child{border-bottom:0}
 .flow-step h3{font-size:clamp(1.22rem,5.7vw,1.5rem)}
 .flow-step p{font-size:1rem;line-height:1.85}
 .flow-step ul{font-size:.92rem;line-height:1.7}
}
@media(max-width:420px){
 .flow-step,.flow-step:first-child,.flow-step:nth-child(2),.flow-step:nth-child(n+3){padding:25px 20px}
}

/* The service introduction changes to a readable one-column briefing before either card becomes narrow. */
@media(max-width:1050px){
 .service-flow .split-heading{grid-template-columns:minmax(0,1fr);min-height:0;gap:18px;padding-top:clamp(38px,6vw,64px);padding-bottom:36px}
 .service-flow .split-heading>div{width:100%;max-width:min(680px,100%)}
 .service-flow .split-heading>p{align-self:start;width:100%;max-width:min(680px,100%);padding:18px 22px;font-size:clamp(1rem,1.55vw,1.12rem);line-height:1.9}
}

/* Mobile navigation must sit above image-led sections and their stacking contexts. */
@media(max-width:760px){
 .site-header{position:relative;z-index:1200}
 .main-nav{z-index:1201}
 .nav-links{z-index:1202}
 .nav-links.is-open{display:block;box-shadow:0 16px 30px rgba(10,48,83,.18)}
}

/* Desktop header: the brand and primary navigation share one deliberate row. */
@media(min-width:921px){
 .site-header{position:relative;background:#fff;border-bottom:1px solid var(--line)}
 .brand-row{position:relative;z-index:1;height:88px}
 .main-nav{position:absolute;z-index:2;inset:0;height:88px;border:0;background:transparent;pointer-events:none}
 .main-nav .nav-inner{height:88px;min-height:0;justify-content:flex-end;pointer-events:none}
 .main-nav .nav-links{height:88px;pointer-events:auto}
 .nav-links a{height:88px}
}

/* Header tools and direction-aware navigation. */
.header-actions{display:flex;align-items:center;gap:8px;color:var(--navy)}
.language-toggle,.login-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #c9d9e7;background:rgba(255,255,255,.96);color:var(--navy);font:inherit;cursor:pointer;transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s var(--ease-out),box-shadow .25s ease}
.language-toggle{gap:5px;min-height:38px;padding:0 11px;font-size:.72rem;font-weight:800;letter-spacing:.04em}
.language-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.language-toggle i{color:#9aabba;font-style:normal;font-weight:400}
.login-button{width:38px;height:38px;padding:0}
.login-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.7}
.language-toggle:hover,.language-toggle:focus-visible,.login-button:hover,.login-button:focus-visible{border-color:var(--blue);background:#f1f8fe;color:var(--blue);outline:0;transform:translateY(-2px);box-shadow:0 8px 18px rgba(14,83,137,.15)}

@media(min-width:1100px){
 .site-header{position:sticky;top:0;z-index:1200;transition:transform .54s var(--ease-out),box-shadow .38s ease;will-change:transform}
 .site-header.is-header-hidden{transform:translateY(calc(-100% - 2px));box-shadow:none}
 .site-header.is-header-visible{box-shadow:0 10px 25px rgba(13,54,87,.12);animation:header-return .55s var(--ease-out) both}
 .site-header .brand-row,.site-header .main-nav,.site-header .main-nav .nav-inner,.site-header .main-nav .nav-links,.site-header .main-nav .nav-links a,.site-header .main-nav .header-actions{transition:height .34s var(--ease-out),transform .34s var(--ease-out),font-size .28s ease}
 .site-header.is-header-compact{box-shadow:0 8px 20px rgba(13,54,87,.1)}
 .site-header.is-header-compact .brand-row,.site-header.is-header-compact .main-nav,.site-header.is-header-compact .main-nav .nav-inner,.site-header.is-header-compact .main-nav .nav-links,.site-header.is-header-compact .main-nav .nav-links a,.site-header.is-header-compact .main-nav .header-actions{height:62px}
 .site-header.is-header-compact .brand{transform:scale(.84);transform-origin:left center}
 .site-header.is-header-compact .nav-links a{padding-inline:clamp(14px,1.45vw,21px);font-size:.84rem}
 .site-header.is-header-compact .language-toggle,.site-header.is-header-compact .login-button{transform:scale(.9)}
 .main-nav .nav-inner{position:relative;justify-content:center}
 .main-nav .nav-links{position:absolute;left:50%;transform:translateX(-50%)}
 .main-nav .header-actions{position:absolute;right:0;height:88px;pointer-events:auto}
}

@keyframes header-return{from{opacity:.4;transform:translateY(-13px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:1099px) and (min-width:761px){
 .site-header{position:sticky;top:0;z-index:1200;transition:transform .54s var(--ease-out),box-shadow .38s ease}
 .site-header.is-header-hidden{transform:translateY(calc(-100% - 2px));box-shadow:none}
 .site-header.is-header-visible{box-shadow:0 10px 25px rgba(13,54,87,.12);animation:header-return .55s var(--ease-out) both}
 .brand-row{height:82px}
 .main-nav{position:relative;inset:auto;height:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);pointer-events:auto}
 .main-nav .nav-inner{position:relative;height:54px;min-height:54px;justify-content:center;pointer-events:auto}
 .main-nav .nav-links{height:54px;pointer-events:auto}
 .main-nav .nav-links a{height:54px;padding-inline:clamp(10px,1.7vw,18px)}
 .main-nav .header-actions{position:absolute;top:-61px;right:0;height:40px;pointer-events:auto}
 .site-header .brand-row,.site-header .main-nav .nav-inner,.site-header .main-nav .nav-links,.site-header .main-nav .nav-links a,.site-header .main-nav .header-actions{transition:height .32s var(--ease-out),transform .32s var(--ease-out)}
 .site-header.is-header-compact .brand-row{height:58px}
 .site-header.is-header-compact .brand{transform:scale(.86);transform-origin:left center}
 .site-header.is-header-compact .main-nav .nav-inner,.site-header.is-header-compact .main-nav .nav-links,.site-header.is-header-compact .main-nav .nav-links a{height:44px;min-height:44px}
 .site-header.is-header-compact .main-nav .header-actions{top:-51px;height:38px;transform:scale(.92);transform-origin:right center}
}

@media(max-width:760px){
 .header-actions{position:absolute;z-index:1203;top:18px;right:78px;gap:5px;height:42px}
 .language-toggle{min-height:36px;padding:0 8px;font-size:.68rem}
 .language-toggle svg{width:15px;height:15px}
 .login-button{width:36px;height:36px}
}
@media(max-width:480px){
 .brand{gap:8px}
 .brand-mark{width:40px;height:38px;border-left-width:6px;border-right-width:6px}
 .brand strong{font-size:1rem;letter-spacing:.055em}
 .brand small{display:none}
 .header-actions{right:73px;gap:4px}
 .language-toggle{gap:3px;min-height:34px;padding:0 6px;font-size:.65rem}
 .language-toggle i{display:none}
 .login-button{width:34px;height:34px}
}
@media(max-width:360px){
 .brand-mark{width:35px;height:35px;font-size:.84rem}
 .brand strong{font-size:.89rem}
 .language-toggle span:first-of-type{display:none}
 .language-toggle{padding:0 5px}
}

/* English labels are longer, so keep the centred desktop navigation concise and on one line. */
@media(min-width:761px){
 .nav-links a{white-space:nowrap}
 .locale-en .nav-links a{padding-inline:13px;font-size:.8rem;letter-spacing:0}
}