@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-cyrillic.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{--paper:#f5f4f0;--ink:#101114;--blue:#2455f4;--rule:#d5d9df;--gutter:4.1vw}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:6px}button:disabled{cursor:default}.skip{position:fixed;z-index:10;top:10px;left:10px;padding:12px;background:#fff;transform:translateY(-160%)}.skip:focus{transform:none}.hero{position:relative;height:100svh;min-height:760px;max-height:1100px;isolation:isolate;overflow:clip;background:var(--paper)}header{position:absolute;z-index:5;left:var(--gutter);right:var(--gutter);top:28px;display:flex;align-items:center;gap:34px;font-size:12px}.brand{font-weight:650;font-size:25px;letter-spacing:-.9px}.tagline{margin-left:15px;color:#636972;font-size:11px}.tagline:before{content:'';display:inline-block;vertical-align:middle;width:60px;border-top:1px solid #9ba1a9;margin-right:20px}nav{display:flex;gap:30px;margin-left:auto}nav a{position:relative;padding:8px 0}nav a:after{content:'';position:absolute;bottom:2px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .24s}nav a:hover:after{transform:scaleX(1)}.languages{display:flex;gap:9px;margin-left:25px;font-size:11px}.languages a[aria-current]{color:var(--blue)}.languages span{color:#9a9ea6}.optics-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1;opacity:0;pointer-events:none;transition:none}.hero[data-ready=true] .optics-canvas{opacity:1}.fallback-light{position:absolute;inset:0;background:linear-gradient(118deg,transparent 50%,#dfe7f355 63%,transparent 69%),radial-gradient(ellipse at 75% 80%,#e3eaf555,transparent 45%)}.foreground-glass{position:absolute;z-index:2;right:-12%;top:-15%;width:20%;height:135%;background:linear-gradient(95deg,transparent,#fdfdff55 14%,#8fa8c13b 23%,#f7fcff77 27%,transparent 43%,#b9d1df44 66%,#fff8 75%,transparent 86%);filter:blur(11px);transform:rotate(8deg);pointer-events:none;opacity:.6}.hero-bottom{position:absolute;z-index:4;bottom:81px;left:var(--gutter)}.subtitle{font-size:clamp(14px,1.5vw,24px);letter-spacing:-.025em;margin:0 0 24px}.cta{display:inline-flex;gap:38px;align-items:center;justify-content:space-between;border:1px solid #535961;border-radius:50%;padding:16px 28px;min-height:54px;font-size:14px;transition:background .22s,color .22s,border-color .22s}.cta span{display:inline-block;transition:transform .22s}.cta:hover{background:var(--ink);color:#fff;border-color:var(--ink)}.cta:hover span{transform:translate(3px,-3px)}.scene-controls{position:absolute;z-index:4;bottom:24px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#67717d}.motion{border:0;padding:8px 0;background:none;display:flex;align-items:center;gap:10px;color:inherit;font-size:10px}.motion span{width:22px;height:11px;border:1px solid #89939e;border-radius:20px;position:relative}.motion span:after{content:'';position:absolute;top:2px;left:2px;width:5px;height:5px;border-radius:50%;background:#89939e;transition:transform .2s}.motion[aria-pressed=true] span{border-color:var(--blue)}.motion[aria-pressed=true] span:after{background:var(--blue);transform:translateX(11px)}.optical-control{position:absolute;z-index:4;right:2.9%;top:27%;height:43%;width:40px;font:10px monospace;color:#637184;display:flex;flex-direction:column;align-items:center;gap:10px}.optical-label{position:absolute;top:-32px;white-space:nowrap;right:0;font:9px Manrope,Arial,sans-serif}.optical-control input{writing-mode:vertical-lr;direction:ltr;width:24px;height:100%;min-height:100px;appearance:none;background:linear-gradient(90deg,transparent 11px,#adb5c2 11px,#adb5c2 12px,transparent 12px);cursor:ns-resize}.optical-control input::-webkit-slider-thumb{appearance:none;width:24px;height:2px;background:var(--blue)}.optical-control input::-moz-range-thumb{width:24px;height:2px;border:0;border-radius:0;background:var(--blue)}.optical-control output{position:absolute;left:30px;top:49%;color:var(--blue);pointer-events:none}.reset{background:none;border:0;font-size:20px;color:#6d7d8e;padding:3px 8px}.content-section{padding:110px var(--gutter)}.eyebrow{font:11px/1.4 Manrope,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#67717c;margin:0 0 38px}h2{font-size:clamp(36px,5.3vw,82px);font-weight:500;line-height:1.08;letter-spacing:-.055em;margin:0 0 65px}h3{font-weight:500}.service-rows{border-top:1px solid var(--rule)}.service-row{display:grid;grid-template-columns:60px 1.1fr 1fr 35px;align-items:center;gap:28px;padding:38px 0;border-bottom:1px solid var(--rule);transition:color .2s}.row-index{font-size:11px;color:#7e8790}.service-row h3{font-size:clamp(21px,2.5vw,39px);letter-spacing:-.04em;line-height:1.15;margin:0}.service-row p{font-size:13px;color:#626c78;max-width:360px;margin:0}.row-arrow{font-size:28px;transition:transform .25s}.service-row:hover{color:var(--blue)}.service-row:hover .row-arrow{transform:translate(5px,-5px)}.approach{background:#e9ecf1}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.steps article{border-top:1px solid #bac3d1;padding-top:23px}.steps article>span{font:11px monospace;color:#2455f4}.steps h3{font-size:27px;letter-spacing:-.04em;margin:35px 0 15px}.steps p{font-size:14px;color:#626c78;max-width:320px}.contact{padding-top:130px;padding-bottom:130px}.contact h2{max-width:950px;margin-bottom:35px}.contact>p:not(.eyebrow){max-width:480px;margin-bottom:38px;color:#626c78}.contact .cta{background:var(--blue);border-color:var(--blue);color:#fff}.contact .cta:hover{background:#1544c8}.contact-email{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:38px;font-size:13px}.copy-email{border:0;border-bottom:1px solid #bac3d1;background:none;color:#626c78;padding:5px 0;font-size:11px}.copy-status{font-size:11px;color:var(--blue)}footer{padding:30px var(--gutter);border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:25px}footer p,footer>a:last-child{font-size:10px;color:#67717d}
@media(max-width:900px){.tagline{display:none}header{gap:20px}nav{gap:20px}.languages{margin-left:5px}.hero{min-height:700px}.subtitle{font-size:17px}.service-row{grid-template-columns:30px 1fr 1fr 25px;gap:15px}.steps{gap:25px}.content-section{padding-block:80px}footer{align-items:start;flex-wrap:wrap}.optical-label{display:none}}
@media(max-width:600px){:root{--gutter:22px}.hero{height:90svh;min-height:660px;max-height:820px}header{top:22px;gap:10px}.brand{font-size:22px}nav{display:none}.languages{margin-left:auto;font-size:12px}.hero-bottom{bottom:90px;right:var(--gutter)}.subtitle{font-size:14px;max-width:300px;line-height:1.4;margin-bottom:18px}.cta{padding:14px 24px;min-height:52px;font-size:13px}.scene-controls{bottom:22px}.optical-control{display:none}.optical-control output{left:19px;font-size:9px}.optical-label{display:none}.foreground-glass{opacity:.35;right:-18%;width:28%}.scroll-hint{font-size:9px}h2{font-size:40px;margin-bottom:40px}.eyebrow{font-size:9px;margin-bottom:28px}.service-row{grid-template-columns:22px 1fr 24px;padding:27px 0;gap:12px}.service-row h3{font-size:25px}.service-row p{grid-column:2;grid-row:2;font-size:12px}.row-arrow{grid-column:3;grid-row:1}.steps{grid-template-columns:1fr;gap:25px}.steps h3{margin-top:18px}.steps p{max-width:340px}.content-section{padding-block:65px}.contact-email{gap:12px;font-size:12px}.contact-email>a{overflow-wrap:anywhere}.contact{padding-bottom:80px}footer{gap:18px}footer p{width:100%;order:3;margin:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* The photographed studio plate supplies the out-of-focus foreground. */
@media(min-width:601px){.hero[data-ready=true] .foreground-glass{opacity:0}}

/* The same silhouette is available while WebGL starts and without JavaScript. */
.ice-fallback{position:absolute;z-index:1;left:62.5%;top:48.5%;height:min(98%,85vw);width:auto;max-width:none;transform:translate(-50%,-50%);pointer-events:none}
.hero[data-ready=true] .ice-fallback{visibility:hidden}
.hero[data-starting=true] .ice-fallback{visibility:hidden}

.hero:not([data-ready=true]) .optical-control,.motion:disabled{visibility:hidden}
.copy-email:disabled{display:none}
@media(min-width:601px){.fallback-light{background:url('/optics-motion/assets/studio-caustics-v1.webp') left top/100% 104% no-repeat}}
@media(max-width:600px){.ice-fallback{left:63%;top:47.5%;height:54%}}
/* Fit the HTML headline to the same clear area as the rendered version. */


/* A reachable, horizontal optical control on touch-sized screens. */
@media(max-width:600px){
  .optical-control{display:grid;grid-template-columns:auto minmax(0,1fr) 22px 40px;align-items:center;gap:8px;left:var(--gutter);right:var(--gutter);top:auto;bottom:40px;width:auto;height:44px}
  .optical-label{position:static;display:block;font-size:9px;color:#596777}
  .optical-control .scale-top,.optical-control .scale-bottom{display:none}
  .optical-control input{writing-mode:horizontal-tb;direction:ltr;width:100%;height:44px;min-height:0;margin:0;background:linear-gradient(transparent 21px,#adb5c2 21px,#adb5c2 22px,transparent 22px);cursor:ew-resize}
  .optical-control input::-webkit-slider-thumb{width:2px;height:20px}
  .optical-control input::-moz-range-thumb{width:2px;height:20px}
  .optical-control output{position:static;font-size:10px;text-align:center}
  .optical-control .reset{width:40px;height:44px;padding:0}
  .scene-controls{bottom:7px}
  .motion{min-height:36px}
}

/* The descriptor and action stay visible; the service heading arrives after
   impact. Static HTML and motion-disabled modes show the complete offer. */
.hero{min-height:650px}
.hero-bottom{width:min(580px,52vw);bottom:76px;display:flex;gap:26px;align-items:flex-end}
.offer-copy{position:relative;flex:1;min-width:0}
.service-kicker{font:10px/1.3 Manrope,Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#4f6076;margin:0 0 9px}
.service-title{position:static;font:500 clamp(26px,2.7vw,43px)/1.04 Manrope,Arial,sans-serif;letter-spacing:-.05em;margin:0;width:auto;transform:none}
.service-title .service-ink--accent{color:#214bd9}
.service-summary{font-size:11px;line-height:1.4;margin:12px 0 0;color:#4d5b6b}
.hero-cta{flex:none;gap:15px;padding:15px 21px;min-height:50px;font-size:12px;margin-bottom:2px}
.offer-copy:after{content:'';position:absolute;left:0;bottom:-9px;width:100%;height:1px;background:linear-gradient(90deg,transparent,#527af6,transparent);transform:scaleX(0);transform-origin:right}


.scene-actions{display:flex;align-items:center;gap:23px}
.replay{order:2;border:0;background:none;padding:8px 0;font-size:10px;color:#596b80}
.replay:disabled{opacity:.35;cursor:default}
.hero:not([data-ready=true]) .replay{visibility:hidden}
.tagline{font-size:11px;color:#4e5967}
@media(min-width:601px) and (max-width:1000px){.hero-bottom{width:64vw}.hero-cta{padding-inline:17px;font-size:11px}.service-title{font-size:29px}}
@media(max-width:600px){
  .hero{height:100svh;min-height:640px;max-height:920px}
  .tagline{display:block;position:absolute;left:0;top:36px;margin:0;font-size:10px;letter-spacing:.015em}
  .tagline:before{display:none}
  .hero-bottom{bottom:103px;right:var(--gutter);width:auto;display:block}
  .service-kicker{font-size:9px;margin-bottom:8px}
  .service-title{font-size:28px;line-height:1.04;letter-spacing:-.045em}
  .service-summary{font-size:11px;margin-top:9px}
  .hero-cta{margin-top:16px;min-height:44px;padding:10px 20px;gap:25px}

  .ice-fallback{top:37%;height:49%}
  .scene-controls{bottom:3px}
  .scene-actions{gap:17px}
  .optical-label{font-size:10px}
  .optical-control{bottom:43px}
  .replay{font-size:10px;min-height:36px}
  .scroll-hint{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.offer-copy:after{animation:none!important}}

/* Impact reveals the two service lines through a fixed aperture. Layout, the
   contact action, and the explicit service descriptor never wait on WebGL. */
.service-line{position:relative;display:block;overflow:clip;padding-block:.08em;margin-block:-.08em}
.service-ink{display:block;transform-origin:left bottom}
.service-line{--reveal:1}
.hero[data-ready=true][data-entrance=impact] .service-ink{will-change:transform,opacity,filter}
.hero[data-ready=true] .service-ink{transform:translate3d(calc((1 - var(--reveal))*18px),0,0) skewX(calc((1 - var(--reveal))*-10deg));filter:blur(calc((1 - var(--reveal))*4px));opacity:clamp(0,calc(var(--reveal)*2),1);clip-path:polygon(calc((1 - var(--reveal))*114%) 0,100% 0,100% 100%,calc((1 - var(--reveal))*114% - 13%) 100%)}
.hero[data-ready=true] .service-line:after{content:'';position:absolute;top:-15%;height:130%;left:calc((1 - var(--reveal))*114% - 6%);width:18px;transform:skewX(-12deg);background:linear-gradient(90deg,transparent,#e8f8ff99 40%,#97bbdfbb 49%,#fff 52%,transparent);filter:blur(.7px);opacity:calc(1 - var(--reveal));pointer-events:none}
.hero[data-ready=true][data-entrance=settled] .service-ink{transform:none;filter:none;opacity:1;clip-path:none;will-change:auto}
.hero[data-ready=true][data-entrance=settled] .service-line:after{display:none}
.hero[data-ready=true] .offer-copy:after{height:2px;bottom:-10px;transform:scaleX(1);opacity:var(--impact-accent,0);background:linear-gradient(90deg,transparent,#6c8dbb 15%,#d7efff 58%,transparent);filter:blur(.3px)}
html[data-optics-boot=loading] .ice-fallback{visibility:hidden}
html[data-optics-boot=loading] .hero .service-ink{transform:translateY(112%);opacity:0}
@media(prefers-reduced-motion:reduce){
 .hero[data-ready=true] .service-ink,html[data-optics-boot=loading] .hero .service-ink{transform:none;filter:none;opacity:1;clip-path:none}
 .hero[data-ready=true] .service-line:after{display:none}
 .hero[data-ready=true] .offer-copy:after{opacity:0}
}

/* The initial HTML and optical texture use these same paths and CSS boxes.
   No font measurement, post-load fitting or typographic substitution. */
.hero{--service-font:clamp(26px,2.7vw,43px);--offer-height:calc(var(--service-font)*2.16 + 49.4px);--offer-bottom:76px;--art-top:max(108px,14.5%);--art-width:72%;--art-gap:12px}
.hero-bottom{height:var(--offer-height);bottom:var(--offer-bottom)}
.service-title{font-size:var(--service-font)}
.hero-headline{position:absolute;z-index:0;left:var(--gutter);top:var(--art-top);bottom:calc(var(--offer-bottom) + var(--offer-height) + 25px);width:var(--art-width);margin:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--art-gap);font-size:0;line-height:0;transform:none;pointer-events:none}
.headline-line{display:block;width:100%;height:100%;overflow:visible;fill:#090b0d}
.optics-canvas{transition:none}
@media(min-width:601px) and (max-width:1000px){.hero{--service-font:29px}}
@media(max-width:600px){.hero{--service-font:28px;--offer-height:166.58px;--offer-bottom:103px;--art-top:max(116px,14.5%);--art-width:91%;--art-gap:8px}}
/* Wait with a quiet receiving surface, not already-landed caustics. */
/* Keep the receiving surface quiet through the first rendered frame. Removing
   the boot marker must not restore the finished photographic floor underneath
   a fading canvas. The prepared canvas replaces it in one paint. */
html[data-optics-boot=loading] .fallback-light,.hero[data-starting=true] .fallback-light,.hero[data-ready=true] .fallback-light{background:linear-gradient(118deg,#f8f8f5,#f1f3f3 65%,#e6edf2)}
.ice-fallback{transition:none;opacity:1}
html[data-optics-boot=loading] .ice-fallback,.hero[data-starting=true] .ice-fallback,.hero[data-ready=true] .ice-fallback{opacity:0;visibility:hidden}
@media(prefers-reduced-motion:reduce){.optics-canvas,.hero-headline,.ice-fallback{transition:none}}

/* Finished landing composition; only the laboratory exposes optical controls. */
body[data-mode=site] .scene-controls{bottom:26px;gap:24px}
.scroll-hint{display:inline-flex;gap:18px;align-items:center;min-height:44px;font-size:11px;color:#4e5967}
.scroll-hint span{font-size:18px;transition:transform .22s}
.scroll-hint:hover span{transform:translateY(3px)}
.hero-note{font:9px/1.4 Manrope,Arial,sans-serif;letter-spacing:.07em;color:#68727c}
.scene-audio{display:flex;align-items:center;gap:5px;flex:none}
.scene-audio[hidden]{display:none}
.sound-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;min-height:44px;padding:8px;border:0;background:none;color:#4e5967;font:11px Manrope,Arial,sans-serif}
.sound-toggle svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sound-toggle:hover{color:var(--blue)}
.sound-toggle[aria-pressed=true]{color:var(--blue)}
.sound-toggle .sound-on,.sound-toggle .sound-loader,.sound-toggle[aria-pressed=true] .sound-off{display:none}
.sound-toggle[aria-pressed=true] .sound-on{display:block}
.sound-toggle[aria-busy=true] .sound-speaker{display:none}
.sound-toggle[aria-busy=true] .sound-loader{display:block;stroke-dasharray:31 13;transform-origin:center;animation:sound-loading 1s linear infinite}
.hero:not([data-ready=true]) .scene-audio{visibility:hidden}
.sound-status:empty{display:none}
.sound-status{position:absolute;right:0;bottom:52px;max-width:240px;padding:12px 16px;background:#f5f8fa;border:1px solid #b9c8d3;color:#40536a;font:11px/1.6 Manrope,Arial,sans-serif}
@keyframes sound-loading{to{transform:rotate(1turn)}}
body[data-mode=site] .offer-copy:after{bottom:-14px}
body[data-mode=site] .hero{--offer-bottom:93px}
body[data-mode=site] .hero-bottom{width:min(690px,65vw);gap:32px}
body[data-mode=site] .hero-cta{min-height:52px;font-size:13px;gap:28px;padding-inline:24px}
@media(max-width:600px){
 body[data-mode=site] .hero{height:100svh;min-height:600px;max-height:940px;--service-font:30px;--offer-height:182px;--offer-bottom:65px;--art-top:clamp(110px,14svh,128px);--art-width:calc(100% - 2*var(--gutter));--art-gap:9px}
 body[data-mode=site] .hero-headline{bottom:auto;height:min(410px,calc(100% - var(--art-top) - var(--offer-bottom) - var(--offer-height) - 34px))}
 body[data-mode=site] .hero-bottom{width:auto;gap:0}
 body[data-mode=site] .service-kicker{font-size:9px;margin-bottom:9px}
 body[data-mode=site] .service-title{line-height:1.08}
 body[data-mode=site] .service-summary{margin-top:10px;font-size:11px}
 body[data-mode=site] .hero-cta{margin-top:20px;min-height:48px;padding:11px 23px;font-size:13px}
 body[data-mode=site] .scene-controls{bottom:12px}
 body[data-mode=site] .hero-note{display:none}
 body[data-mode=site] .tagline{font-size:10px}
 body[data-mode=site] .ice-fallback{height:min(105vw,451px,calc((100% - var(--art-top) - var(--offer-bottom) - var(--offer-height) - 34px)*1.1));top:calc(var(--art-top) + min(410px,calc(100% - var(--art-top) - var(--offer-bottom) - var(--offer-height) - 34px))*.52);left:61%}
}
@media(max-width:359px){body[data-mode=site] .hero{--service-font:27px;--offer-height:176px;--offer-bottom:58px}body[data-mode=site] .hero-cta{margin-top:17px}}
/* Match ice-shape.js: rectify the 2:3 photo without replacing its material. */
@media(max-width:600px){.ice-fallback{transform:translate(-50%,-50%) translate(-.045385%,.158789%) matrix(1,-.222522,-.201711,1.044885,0,0)}}
@media(min-width:601px) and (max-height:600px){.hero{min-height:620px}}
@media(min-width:601px) and (max-width:760px){body[data-mode=site] .hero-bottom{width:calc(100% - 2*var(--gutter))}}
.lab-footer{align-items:center;min-height:100px}.lab-footer p{max-width:540px;font-size:12px}