body{overflow-x:clip}.svc-nav{position:relative;height:auto;padding:25px 6%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff20}.svc-nav img{width:100px}.svc-nav nav{display:flex;gap:20px}.svc-hero{min-height:85svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7%;padding:70px 7%}.svc-hero h1{font-size:clamp(42px,6vw,88px)}.svc-hero p,.svc-text p{color:#aaa2ae;line-height:1.9;max-width:620px}.svc-visual{overflow:hidden;border-radius:12px;background:#18151b;aspect-ratio:4/5}.svc-visual img{width:100%;height:100%;object-fit:cover;object-position:top;transform:translate3d(var(--x,0px),var(--y,0px),0) scale(var(--scale,1.08))}.svc-story{min-height:180vh;position:relative}.svc-sticky{position:sticky;top:0;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8%;padding:65px 8%}.svc-sticky .svc-visual{aspect-ratio:1}.svc-text h2{font-size:clamp(34px,4vw,62px);margin:20px 0}.svc-points{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.svc-points article{border-top:1px solid #a3478155;padding:25px 0;color:#b6aebc;line-height:1.8}.svc-faq details{border-top:1px solid #ffffff25;padding:24px 0}.svc-faq summary{cursor:pointer;font-size:19px}.svc-faq p{color:#aaa2ae;line-height:1.8}.svc-links{display:flex;flex-wrap:wrap;gap:22px;margin-top:30px}.svc-reveal{opacity:var(--o,1);translate:0 var(--ry,0px)}@media(max-width:760px){.svc-nav nav{font-size:10px;gap:12px}.svc-hero,.svc-sticky{grid-template-columns:1fr;padding:40px 7%;gap:30px}.svc-hero{min-height:0}.svc-hero h1{font-size:48px}.svc-visual{max-height:430px}.svc-points{grid-template-columns:1fr;gap:0}.svc-sticky{min-height:100svh}.svc-sticky .svc-visual{max-height:36svh}.svc-text h2{font-size:34px}.svc-story{min-height:155vh}}@media(prefers-reduced-motion:reduce){.svc-visual img{transform:none!important}.svc-reveal{opacity:1;translate:none}.svc-story{min-height:0}.svc-sticky{position:relative}}/* Cinematic panels, HUD and depth inspired by the supplied reference sections. */
.svc-visual{position:relative;isolation:isolate;background:#080809;border:1px solid #ffffff0c;perspective:1100px;box-shadow:0 20px 70px #0005}.svc-visual img{object-fit:contain;object-position:center;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(var(--art-scale,1));transition:transform .18s ease-out;filter:brightness(1.03)}
.svc-hero .svc-visual:before,.svc-hero .svc-visual:after{content:'';position:absolute;top:0;bottom:0;width:50.1%;z-index:2;background:#18181b;pointer-events:none;transition:transform 1.25s cubic-bezier(.16,1,.3,1)}.svc-hero .svc-visual:before{left:0;border-right:1px solid #b72e8850;transform:translateX(calc(var(--opened,0)*-102%))}.svc-hero .svc-visual:after{right:0;transform:translateX(calc(var(--opened,0)*102%))}
.svc-visual.is-visible{--opened:1}.svc-sticky .svc-visual{border-radius:24px;clip-path:inset(var(--mask-inset,0%) round 24px);transform:perspective(1100px) rotateY(var(--depth-angle,0deg));box-shadow:0 25px 80px #b72e8815}.svc-sticky .svc-visual:after{content:'';position:absolute;inset:12px;border:1px solid #d958a955;clip-path:polygon(0 0,26% 0,26% 1%,1% 1%,1% 26%,0 26%,0 0,100% 0,100% 26%,99% 26%,99% 1%,74% 1%,74% 0,100% 0,100% 100%,74% 100%,74% 99%,99% 99%,99% 74%,100% 74%,100% 100%,0 100%,0 74%,1% 74%,1% 99%,26% 99%,26% 100%,0 100%);pointer-events:none}.svc-points article{transition:transform .7s,opacity .7s;transition-delay:calc(var(--card-index,0)*100ms)}.svc-points:not(.is-visible) article{opacity:0;transform:translateY(35px) rotateX(8deg)}.svc-points.is-visible article:hover{transform:translateY(-7px);border-color:#da70b2}.service-design .svc-sticky .svc-visual{border-color:#bb489a66}.svc-hero>div:first-child{animation:svc-copy-in .8s ease-out both}@keyframes svc-copy-in{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}@media(max-width:760px){.svc-sticky .svc-visual{aspect-ratio:4/5;max-height:43svh;justify-self:center;width:100%}.svc-hero .svc-visual{max-height:560px}.svc-story{min-height:160vh}}@media(prefers-reduced-motion:reduce){.svc-hero .svc-visual:before,.svc-hero .svc-visual:after{display:none}.svc-visual,.svc-visual img,.svc-points article{transform:none!important;transition:none;clip-path:none!important}.svc-points:not(.is-visible) article{opacity:1}.svc-hero>div:first-child{animation:none}}
