/* The supplied artwork is the scene and the key texture atlas. */
@font-face{font-family:Manrope;src:url('assets/fonts/manrope-latin.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Unbounded;src:url('assets/fonts/unbounded-cyrillic.woff2') format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;src:url('assets/fonts/unbounded-latin.woff2') format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
:root{--paper:#c4dadd;--ink:#103e46;--muted:#385e65;--line:rgba(29,83,92,.25);--scene:url('assets/images/reference-scene-v1.webp')}
body{background:#c4dadd;font-weight:500}
.site-header{position:absolute;height:clamp(92px,10vw,150px);background:transparent;color:#103e46;isolation:isolate}
.site-header:before{display:none}
.site-header.is-scrolled{height:82px;background:rgba(209,232,234,.96);backdrop-filter:blur(16px)}
.site-header.is-scrolled:before{display:none}.site-header.is-scrolled .wordmark-main{font-size:38px}.site-header.is-scrolled .wordmark-sub{font-size:12px}
.header-shell{grid-template-columns:240px 1fr auto;gap:24px}
.wordmark-main{font-weight:500;font-size:clamp(36px,4.5vw,66px);letter-spacing:.12em}
.wordmark-sub{font-weight:500;font-size:clamp(12px,1.4vw,20px)}
.desktop-nav{gap:clamp(16px,2.6vw,38px)}
.desktop-nav a{font-size:12px;font-weight:750;letter-spacing:.045em}
.header-action{min-height:44px;padding:0 20px;font-size:11px;font-weight:750;box-shadow:0 0 15px rgba(201,255,255,.4)}
.reference-hero{--scene-size:min(100vw,110svh);--keys-top:calc(var(--scene-size) * 735 / 1254);height:min(100vw,100svh);min-height:0;max-height:none;aspect-ratio:auto;width:100%;background:#153f49;container-type:inline-size}
.reference-hero .hero-media{inset:0;width:100%;height:100%;z-index:0;background:url('assets/images/scene-material-mobile-v2.webp') center top/contain no-repeat;mask-image:none;transform:none;animation:none}
.scene-extensions{display:none}
@media(min-width:701px){.reference-hero .hero-media{background-image:url('assets/images/scene-soft-light-v4.webp');background-size:cover}}
@media(min-width:701px){.site-header:not(.is-scrolled){color:#ecfcff}.site-header:not(.is-scrolled) .desktop-nav a{text-shadow:0 1px 3px #103e46,0 0 7px #103e46}.site-header:not(.is-scrolled) .menu-button{border-color:currentColor}.menu-open .site-header{color:#153f49}}
.reference-hero:before,.reference-hero:after,.reference-hero .hero-noise,.reference-hero .hero-circuit,.reference-hero .code-fragment{display:none}
.reference-hero .hero-shell{position:absolute;inset:0;width:100%;max-width:none;pointer-events:none}
.reference-keyboard{position:absolute;left:47.5%;top:auto;bottom:calc(16% + 76px);width:min(calc(var(--scene-size) * 501 / 1254),calc(100vw - 32px));transform:translateX(-50%);aspect-ratio:334/132;z-index:3;container-type:inline-size;pointer-events:none}
.reference-keyboard:before{content:'';position:absolute;left:-9%;right:-9%;top:91%;height:28%;background:radial-gradient(ellipse at 50% 25%,rgba(194,255,255,.86),rgba(35,225,237,.52) 28%,rgba(34,184,220,.18) 51%,transparent 72%);filter:blur(5px);pointer-events:none;z-index:-1;mix-blend-mode:screen}
.reference-keyboard:after{content:'';position:absolute;left:8%;right:8%;top:99%;height:28%;background:repeating-linear-gradient(100deg,transparent 0 10%,rgba(229,255,255,.2) 14%,transparent 19%);mask-image:linear-gradient(#000,transparent);opacity:.6;pointer-events:none;z-index:-1}
@supports(-webkit-box-reflect:below){.reference-keyboard{-webkit-box-reflect:below -2px linear-gradient(transparent 62%,rgba(255,255,255,.15))}.reference-keyboard:after{display:none}}
.reference-hero .code-fragment{display:block;position:absolute;z-index:1;top:32%;width:17%;max-width:200px;overflow:visible;font:500 clamp(8px,.68vw,12px)/1.8 monospace;color:#c5f7fa;opacity:.48;text-shadow:0 0 6px rgba(172,244,255,.2);pointer-events:none;user-select:none;mask-image:none}
.reference-hero .code-fragment span{display:block;white-space:pre}
.reference-hero .code-fragment{width:21ch;max-width:none}
.reference-hero .code-left{left:26%}.reference-hero .code-right{right:26%}
.reference-key{position:absolute;left:calc(var(--layout-x,var(--x))/334*100%);top:calc(var(--y)/132*100%);width:calc(var(--w)/334*100%);height:calc(var(--h)/132*100%);padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:12%;outline-offset:3px}
/* Compact staggered rows; atlas coordinates remain unchanged. */
.reference-key{width:calc(64/334*100%)}
.reference-key:nth-child(1){--layout-x:36}
.reference-key:nth-child(2){--layout-x:102}
.reference-key:nth-child(3){--layout-x:168}
.reference-key:nth-child(4){--layout-x:234}
.reference-key:nth-child(n+5){margin-top:-.3%}
.reference-key:nth-child(5){--layout-x:3}
.reference-key:nth-child(6){--layout-x:69}
.reference-key:nth-child(7){--layout-x:135}
.reference-key:nth-child(8){--layout-x:201}
.reference-key:nth-child(9){--layout-x:267}
.reference-key:nth-child(1){--sx:82;--sy:52;--sw:81;--sh:78}
.reference-key:nth-child(2){--sx:164;--sy:52;--sw:79;--sh:78}
.reference-key:nth-child(3){--sx:244;--sy:52;--sw:79;--sh:78}
.reference-key:nth-child(4){--sx:324;--sy:52;--sw:81;--sh:78}
.reference-key:nth-child(5){--sx:30;--sy:130;--sw:85;--sh:86}
.reference-key:nth-child(6){--sx:115;--sy:130;--sw:84;--sh:86}
.reference-key:nth-child(7){--sx:199;--sy:130;--sw:84;--sh:86}
.reference-key:nth-child(8){--sx:283;--sy:130;--sw:85;--sh:86}
.reference-key:nth-child(9){--sx:368;--sy:130;--sw:87;--sh:86}
.reference-key .key-face{position:absolute;inset:0;display:block;background-image:url('assets/images/keys-user-reference-v4.webp');background-size:calc(492 / var(--sw) * 100%) calc(278 / var(--sh) * 100%);background-position:calc(var(--sx) / (492 - var(--sw)) * 100%) calc(var(--sy) / (278 - var(--sh)) * 100%);clip-path:url(#key-silhouette);transform-origin:50% 85%;transition:transform .23s cubic-bezier(.2,.75,.25,1),filter .23s;pointer-events:none;will-change:auto}
.reference-key:nth-child(1):after,.reference-key:nth-child(4):after,.reference-key:nth-child(7):after{content:'';position:absolute;left:74%;top:-5%;width:18%;aspect-ratio:1;pointer-events:none;background:radial-gradient(circle,#fff 0 9%,rgba(208,255,255,.6) 16%,transparent 65%),linear-gradient(transparent 45%,#e5ffff 50%,transparent 55%),linear-gradient(90deg,transparent 45%,#e5ffff 50%,transparent 55%);filter:drop-shadow(0 0 4px #caffff);opacity:.82}
.reference-key:before{content:'';position:absolute;inset:67% 6% -13%;background:radial-gradient(ellipse,rgba(218,255,255,.8),rgba(142,235,242,.25) 38%,transparent 70%);opacity:0;transform:scale(.75);pointer-events:none;transition:opacity .3s,transform .4s}
.reference-key .key-face:before,.reference-key .key-face:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0}
.reference-key .key-face:before{background:radial-gradient(ellipse at var(--light-x,75%) var(--light-y,4%),rgba(255,255,255,.9),transparent 48%);opacity:.32;transition:opacity .24s}
.reference-key .key-face:after{inset:-40% -85%;background:linear-gradient(115deg,transparent 35%,rgba(235,255,255,.12) 43%,rgba(255,255,255,.62) 49%,rgba(229,255,255,.16) 55%,transparent 63%);transform:translateX(-55%)}
@media(hover:hover) and (pointer:fine){
 .reference-key:hover .key-face{filter:brightness(1.04);transform:translateY(-2px)}
 .reference-key:hover .key-face:before{opacity:.65}
 .reference-key:hover:before{opacity:.55;transform:scale(1)}
}
.reference-key:focus-visible .key-face{filter:brightness(1.05);transform:translateY(-2px)}
.reference-key.is-pressed .key-face,.reference-key:active .key-face{animation:none;transform:translateY(3px) scale(.975);filter:brightness(.98);transition-duration:.075s}
.reference-key.is-pressed:before{opacity:.9;transform:scale(.9)}
.reference-key:focus-visible{outline:2px solid #0c5964}
.reference-key.is-pulsing .key-face{animation:reference-press .82s cubic-bezier(.22,.7,.25,1)}
.reference-key.is-pulsing .key-face:after{animation:key-sheen .76s ease-in-out}
.reference-key.is-pulsing:before{animation:key-contact-light .82s ease-out}
.reference-key.is-echoing .key-face:before{animation:key-echo .62s ease-out}
.reference-key.is-echoing:before{animation:key-contact-light .62s ease-out}
@keyframes reference-press{0%,100%{transform:translateY(0) scale(1);filter:brightness(1)}22%{transform:translateY(3px) scale(.975);filter:brightness(.99)}52%{transform:translateY(-2px) scale(1);filter:brightness(1.08)}76%{transform:translateY(.5px) scale(1);filter:brightness(1.02)}}
@keyframes key-sheen{0%{transform:translateX(-55%);opacity:0}22%{opacity:.65}65%{opacity:.5}100%{transform:translateX(55%);opacity:0}}
@keyframes key-contact-light{0%,100%{opacity:0;transform:scale(.8)}30%{opacity:.8;transform:scale(1)}65%{opacity:.3;transform:scale(1.25)}}
@keyframes key-echo{0%,100%{opacity:0}35%{opacity:.55}}
.reference-key .key-face:after{animation:key-sunlight 8s ease-in-out infinite;animation-delay:calc(var(--x) * 4ms);animation-play-state:paused}
.reference-key:nth-child(1):after,.reference-key:nth-child(4):after,.reference-key:nth-child(7):after{animation:key-sparkle 8s ease-in-out infinite;animation-delay:calc(var(--x) * 4ms);animation-play-state:paused}
.reference-keyboard.is-lit .reference-key .key-face:after,.reference-keyboard.is-lit .reference-key:after{animation-play-state:running}
@keyframes key-sunlight{0%,58%{transform:translateX(-55%);opacity:0}65%{opacity:.42}75%{opacity:.34}83%,100%{transform:translateX(55%);opacity:0}}
@keyframes key-sparkle{0%,58%,84%,100%{opacity:.12;transform:scale(.55)}68%{opacity:1;transform:scale(1.2)}75%{opacity:.45;transform:scale(.8)}}
.section{isolation:isolate;overflow:hidden;border-top:1px solid rgba(237,255,255,.62);padding:clamp(72px,8vw,118px) 0}
.section>.shell{position:relative;z-index:2}
.about,.approach{background:linear-gradient(110deg,rgba(221,241,242,.68),rgba(189,216,220,.62)),var(--scene) 50% 35%/auto 1200% no-repeat}
.services,.work,.contact{background:linear-gradient(110deg,rgba(197,225,229,.63),rgba(168,204,210,.58)),var(--scene) 50% 35%/auto 1200% no-repeat}
.section:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(118deg,transparent 55%,rgba(236,255,255,.36) 63%,transparent 71%);opacity:.75}
.about:before,.contact:before{display:none}
.section-index,.section-note{font-size:12px;font-weight:750;color:#355b63}
.about h2,.services h2,.work h2,.process-title,.contact h2{font-family:Unbounded,var(--sans);font-weight:550;font-size:clamp(38px,4.3vw,64px);line-height:1.18;letter-spacing:-.045em;color:#103c44;text-shadow:0 1px 0 rgba(241,255,255,.85),0 3px 9px rgba(27,84,92,.07)}
.about h2 em,.services h2 em,.work h2 em,.process-title em,.contact h2 em{font-family:inherit;font-weight:500;letter-spacing:-.04em;color:#326b74}
.about-copy p,.about-copy p:first-child,.services-intro>p:last-child,.contact-copy>p:not(.section-index){color:#315963}
.value-grid{background:rgba(219,240,242,.46);border-color:rgba(239,255,255,.65);box-shadow:inset 0 1px rgba(255,255,255,.8),0 18px 44px rgba(23,75,85,.08)}
.value-card{border-color:rgba(49,108,119,.22)}
.value-card:hover{background:rgba(235,254,255,.65);transform:translateY(-3px)}
.value-card h3,.steps h3{font-family:Unbounded,var(--sans);font-weight:500;font-size:22px;letter-spacing:-.04em;line-height:1.35}.accordion summary b{font-weight:750;letter-spacing:-.03em}
.value-card>p,.steps p,.accordion-body p{color:#345e67;font-size:15px;line-height:1.65}
.accordion-body strong{font-size:11px;font-weight:800;color:#1b4650}
.accordion summary span,.steps small{color:#38616a;font-size:12px;font-weight:650}
.module-art{filter:drop-shadow(0 8px 12px rgba(61,116,127,.1))}
.steps:before{background:linear-gradient(#c7ffff,#69b9c4,transparent);box-shadow:0 0 10px rgba(202,255,255,.8)}
.steps li>span{background:#cde7ea;border-color:#89bac2;color:#174f5a;font-size:12px;font-weight:750;box-shadow:0 0 0 6px #c4dfe3,inset 0 1px #f0ffff,0 0 17px rgba(204,255,255,.65)}
.empty-case{min-height:320px;background:linear-gradient(135deg,rgba(236,255,255,.25),rgba(149,194,201,.15)),var(--scene) 50% 35%/auto 1200% no-repeat;border:1px solid rgba(238,255,255,.8);box-shadow:inset 0 0 30px rgba(231,255,255,.26),0 18px 48px rgba(22,74,85,.14)}
.contact-form label>span{font-size:12px;font-weight:700;color:#315761}
.contact-form input,.contact-form textarea,.contact-form select{font-size:16px;font-weight:550;color:#143f49;border-color:rgba(41,91,103,.43)}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:#176674;box-shadow:0 2px #176674}
.contact .button-ice{background:#174e5a;border-color:#174e5a;box-shadow:0 0 20px rgba(221,255,255,.5)}
.site-footer{background:linear-gradient(rgba(181,211,217,.65),rgba(171,202,209,.68)),var(--scene) 50% 35%/auto 1200% no-repeat;color:#234e58}
.mobile-menu{background:linear-gradient(rgba(188,220,224,.72),rgba(213,237,239,.82)),var(--scene) 50% 35%/auto 1200% no-repeat;color:#153f49}
.mobile-nav span{font-family:var(--sans);font-weight:750;font-size:30px;letter-spacing:-.035em}
.mobile-nav a,.mobile-menu-heading{border-color:rgba(35,82,94,.25)}
.mobile-menu-heading{font-weight:700}
.mobile-menu-bottom .button{background:#174e5a;color:#f0ffff;border-color:#174e5a}
.menu-open .site-header{position:fixed;background:#bddce0}
.menu-open .site-header .wordmark,.menu-button[aria-expanded=true]{color:#153f49;border-color:#416f79}
@media(min-width:921px) and (max-width:1120px){.header-shell{grid-template-columns:200px 1fr auto;gap:16px}.desktop-nav{gap:16px}.desktop-nav a{font-size:10px}.header-action{padding:0 14px;font-size:10px}.wordmark-main{font-size:43px}}
@media(max-width:920px){.site-header{height:94px}.header-shell{display:flex}.wordmark-main{font-size:40px}.wordmark-sub{font-size:13px}}
@media(min-width:921px){.site-header{height:100px}.site-header .wordmark-main{font-size:46px}.site-header .wordmark-sub{font-size:15px}}
@media(max-width:700px){
 .site-header{height:82px}.site-header .wordmark-main{font-size:32px;font-weight:500}.site-header .wordmark-sub{font-size:11px}
 .reference-hero{--scene-size:100vw;margin-top:82px;aspect-ratio:1;height:100vw;min-height:0}
 .reference-hero .hero-media{top:0;left:0;mask-image:none}
 .reference-hero .reference-keyboard{left:47.5%;top:auto;bottom:calc(21% + clamp(24px,7.7vw,34px));width:46%}
 .reference-hero .code-fragment{top:30%;width:21ch;font-size:clamp(5px,1.45vw,9px);opacity:.42;line-height:1.6}
 .reference-hero .code-left{left:12%}.reference-hero .code-right{right:12%}
 .reference-hero:after{display:none}
 .section{padding:54px 0}
 .about h2,.services h2,.work h2,.process-title,.contact h2{font-size:clamp(27px,7.7vw,37px);line-height:1.2;letter-spacing:-.04em;overflow-wrap:normal}
 .section-note{font-size:12px}.about-copy p,.about-copy p:first-child{font-size:16px}
 .value-card h3,.steps h3{font-size:20px}.accordion summary b{font-size:22px}
 .empty-case{min-height:230px}.about:before,.contact:before{opacity:.38}
 .site-footer{padding:38px 0}
}
@media(prefers-reduced-motion:reduce){.reference-key .key-face{animation:none!important;transition:none!important;transform:none!important}.section:after{animation:none}.js .reveal{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reference-key:before,.reference-key .key-face:before,.reference-key .key-face:after{display:none;animation:none!important;transition:none!important}}
@media(prefers-reduced-motion:reduce){.reference-key:after{animation:none!important;opacity:.5}}
.mobile-hero-intro{display:none}
@media(min-width:701px){
 .reference-hero .code-fragment{top:29%;width:25ch;font-size:clamp(10px,.92vw,15px);line-height:1.6;opacity:.72;text-shadow:0 1px 4px #092a35}
 .reference-hero .code-left{left:23%}.reference-hero .code-right{right:22%}
}
@media(max-width:700px){
 .site-header{height:94px;color:#e4f5f8;background:transparent}.site-header .wordmark-main{font-size:36px}.site-header .wordmark-sub{font-size:12px}.site-header .menu-button{border-color:#b5dbe580}
 .reference-hero{margin-top:0;height:calc(390px + 100vw);aspect-ratio:auto;background:#092632}
 .reference-hero .hero-media{background-image:linear-gradient(180deg,rgba(5,28,37,.65),rgba(5,28,37,.55) 46%,transparent 68%),url('assets/images/scene-material-mobile-v2.webp');background-position:center;background-size:100% 100%;mask-image:none}
 .mobile-hero-intro{display:block;position:absolute;left:24px;right:24px;top:132px;color:#d8edf3;pointer-events:auto;max-width:480px}
 .mobile-hero-eyebrow{font-size:9px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 20px;color:#a5c6d0}
 .mobile-hero-intro h2{font:500 clamp(28px,8.1vw,37px)/1.22 Unbounded,Manrope,sans-serif;letter-spacing:-.04em;margin:0 0 20px;color:#eefaff}
 .mobile-hero-intro>p:not(.mobile-hero-eyebrow){font:500 16px/1.6 Manrope,sans-serif;max-width:310px;margin:0}
 .mobile-hero-cta{display:inline-flex;align-items:center;justify-content:center;gap:24px;border:1px solid #d1f6ff;border-radius:30px;padding:0 24px;min-height:50px;margin-top:22px;color:#e5faff;font:600 12px/1.4 Manrope,sans-serif;box-shadow:0 0 15px #8ddced25}
 .mobile-hero-cta svg{width:24px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2}.mobile-hero-cta:focus-visible{outline:2px solid white;outline-offset:4px}
 .reference-hero .reference-keyboard{left:46%;bottom:29%;width:53%}
 .reference-hero .code-fragment{display:none}
 .reference-hero .code-left{left:8%}.reference-hero .code-right{right:8%}
}