/* The web page shares the film page's editorial scale and measured spatial motion. */
@media(min-width:768px){
  .page-web-interactive{--lime:#c9ff1b;--ink:#17191b;background:#fff;color:var(--ink);overflow-x:clip}
  .page-web-interactive .site-header{position:relative;z-index:40;min-height:82px;padding:18px var(--pad);background:#fff}
  .page-web-interactive .site-header nav{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:40;width:max-content;gap:24px;padding:4px 22px;background:#ffffffdf;backdrop-filter:blur(18px);border:1px solid #17191b15;border-radius:4px;box-shadow:0 12px 35px #1111}
  .page-web-interactive .site-header nav a{font-size:10px;white-space:nowrap}
  .page-web-interactive .site-header .start-link{margin-left:auto}
  .page-web-interactive .page-languages{margin-left:22px}

  .page-web-interactive .creative-hero.web-intro{display:block;position:relative;height:calc(100svh - 82px);min-height:670px;max-height:930px;margin:0;padding:8vh var(--pad) 38px;overflow:hidden;isolation:isolate;background:#fff}
  .page-web-interactive .web-intro .hero-eyebrow{position:relative;z-index:3;display:block;margin:0;font-size:10px;letter-spacing:.12em}
  .page-web-interactive .web-intro .hero-eyebrow>span{display:none}
  .page-web-interactive .web-intro h1,.page-web-interactive:lang(ru) .web-intro h1{position:relative;z-index:3;display:block;width:41%;max-width:480px;margin:4vh 0!important;font-size:clamp(47px,4.9vw,78px)!important;line-height:.98!important;letter-spacing:-.065em!important;font-weight:430!important}
  .page-web-interactive .web-intro h1>span:not(.work-dot){display:block;margin-left:0}
  .page-web-interactive .web-intro .hero-summary{position:relative;z-index:3;display:block;width:39%;max-width:390px;margin:0;justify-self:auto;align-self:auto}
  .page-web-interactive .web-intro .hero-summary p{font-size:clamp(15px,1.25vw,19px);line-height:1.55;max-width:31ch}
  .page-web-interactive .web-intro .circle-link{display:grid;place-items:center;width:47px;height:47px;margin:34px 0 0;border:0;border-radius:0;background:var(--lime);font-size:23px}
  .page-web-interactive .web-intro .circle-link:hover{transform:translateY(5px);background:#b8f000}
  .page-web-interactive .web-intro .assembly-section{display:block!important;position:absolute;z-index:1;inset:0 0 0 43%;width:auto;height:100%!important;margin:0;pointer-events:none}
  .page-web-interactive .web-intro .assembly-stage{position:relative!important;top:auto;height:100%;min-height:0;background:radial-gradient(ellipse at 75% 55%,#f3ffd9 0,#fff 52%);overflow:visible}
  .page-web-interactive .web-intro .assembly-world{position:absolute;inset:0;perspective:1600px;transform-style:preserve-3d}
  .page-web-interactive .assembly-laptop{left:3%;top:33%;width:70%;transform:translate3d(0,var(--laptop-y,0px),0) rotateX(8deg) rotateY(var(--laptop-turn,-10deg));transform-origin:50% 50%;transition:none;backface-visibility:hidden}
  .page-web-interactive .laptop-screen{border-width:10px;background:#fff}
  .page-web-interactive .assembly-plane{inset:0!important;width:100%!important;height:100%!important;max-width:none!important;padding:0!important;box-shadow:none!important;background:#fff!important;transform:none!important}
  .page-web-interactive .assembly-plane.plane-nav,.page-web-interactive .assembly-plane.plane-action{display:none!important}
  .page-web-interactive .assembly-plane.plane-title{display:block!important;clip-path:none!important}
  .page-web-interactive .screen-slice img{display:block;width:100%;height:100%;object-fit:cover}
  .page-web-interactive .assembly-phone{left:79%;top:40%;width:17%;opacity:1;transform:translate3d(0,var(--phone-y,0px),0) rotateY(var(--phone-turn,-8deg)) rotateZ(3deg);transition:none}
  .page-web-interactive>.device-hero{display:none}

  .page-web-interactive .case-intro{margin:0;padding:64px var(--pad) 70px;gap:6vw;background:#fff;border-top:1px solid #17191b20}
  .page-web-interactive .case-intro h2{font-size:clamp(40px,4vw,62px)!important;font-weight:430;letter-spacing:-.055em}
  .page-web-interactive .tiny-lime{color:#a8dd00}
  .page-web-interactive .case-brief{font-size:14px;line-height:1.65}
  .page-web-interactive .case-brief h3{font-size:clamp(21px,2vw,30px)}
  .page-web-interactive .case-brief dl{margin-top:24px}

  .page-web-interactive .web-card-sequence{display:block;margin:0;padding:62px 0 0;background:#fff;scroll-margin-top:0}
  .page-web-interactive .sequence-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:30px;padding:0 var(--pad) 50px;margin:0}
  .page-web-interactive .sequence-heading>p{font-size:10px;letter-spacing:.11em}
  .page-web-interactive .sequence-heading>h2{width:auto;font-size:clamp(35px,3.8vw,58px);line-height:1.05;font-weight:430}
  .page-web-interactive .web-stack{margin:0;background:#111416;perspective:1600px}
  .page-web-interactive .sequence-card,.page-web-interactive .sequence-card:nth-child(2),.page-web-interactive .sequence-card:nth-child(3){position:sticky;top:0;z-index:1;display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);align-items:center;gap:5vw;width:100%;height:100svh;min-height:660px;max-height:none;margin:0!important;padding:clamp(34px,4vw,64px) var(--pad);border:0;border-radius:0;box-shadow:0 -10px 28px #0003;overflow:hidden;backdrop-filter:none;transform:none!important;scroll-margin-top:0;isolation:isolate}
  .page-web-interactive .sequence-card:nth-child(1){z-index:1;background:#fff;color:var(--ink)}
  .page-web-interactive .sequence-card:nth-child(2){z-index:2;background:radial-gradient(ellipse at 73% 68%,#dcff76 0,#fff 59%);color:var(--ink)}
  .page-web-interactive .sequence-card:nth-child(3){z-index:3;background:#121416;color:#fff}
  .page-web-interactive .sequence-copy{position:relative;z-index:3;max-width:35ch}
  .page-web-interactive .sequence-number{margin-bottom:40px;font-size:10px}
  .page-web-interactive .sequence-number:before{display:none}
  .page-web-interactive .sequence-copy h3{font-size:clamp(30px,3.35vw,52px);line-height:1.08;font-weight:430;letter-spacing:-.05em;margin:0 0 24px}
  .page-web-interactive .sequence-copy>p{font-size:clamp(13px,1.05vw,16px);line-height:1.65;margin:0 0 35px}
  .page-web-interactive .sequence-copy>a{display:inline-block;padding:10px 0;font-size:11px;border-color:currentColor;color:inherit}
  .page-web-interactive .sequence-screen,.page-web-interactive .sequence-card:nth-child(2) .sequence-screen,.page-web-interactive .sequence-card:nth-child(3) .sequence-screen{position:relative;z-index:2;min-width:0;max-width:100%;border:1px solid #17191b20;border-radius:3px;background:#fff;box-shadow:22px 26px 35px #1113;transform:perspective(1400px) translate3d(var(--screen-x,0px),var(--screen-y,0px),0) rotateY(var(--screen-turn,-4deg)) scale(var(--screen-scale,1))!important;transform-origin:50% 50%;transition:none;will-change:transform}
  .page-web-interactive .sequence-card:nth-child(3) .sequence-screen{box-shadow:22px 28px 40px #0009}
  .page-web-interactive .sequence-screen img{width:100%;height:auto;max-height:66svh;object-fit:contain}
  .page-web-interactive .sequence-browser{padding:11px 14px;font-size:9px;color:#17191b}
  .page-web-interactive .desktop-exhibit,.page-web-interactive .screen-pair,.page-web-interactive .brief-exhibit{display:none!important}

  .page-web-interactive .interface-exhibit{margin:0;padding:90px var(--pad);grid-template-columns:.7fr 1.3fr;gap:6vw;background:#fff;color:var(--ink);border-top:1px solid #17191b22}
  .page-web-interactive .interface-title h2{font-size:clamp(34px,3.7vw,55px);line-height:1.07;font-weight:430}
  .page-web-interactive .interface-title>p:last-child{font-size:14px}
  .page-web-interactive .interface-board{gap:1px;background:#17191b2b;border:1px solid #17191b2b}
  .page-web-interactive .ui-sample{min-height:150px;padding:24px;border:0;border-radius:0;background:#fff;box-shadow:none;transition:background .4s,transform .4s;transform-origin:50% 50%}
  .page-web-interactive .ui-sample:hover{background:#f6ffe4;transform:perspective(900px) translateZ(10px)}
  .page-web-interactive .demo-nav a{background:transparent;border:1px solid #17191b66;border-radius:0;box-shadow:none;color:var(--ink);transition:background .3s,color .3s,transform .3s}
  .page-web-interactive .demo-nav a:hover{background:var(--lime);color:var(--ink);transform:translateY(-4px)}
  .page-web-interactive .glass-demo{background:var(--lime);color:var(--ink);border:0;border-radius:0;box-shadow:none;font-weight:500;transition:transform .3s}
  .page-web-interactive .glass-demo:hover{transform:translateY(-5px)}
  .page-web-interactive .glass-demo i{background:var(--ink)}
  .page-web-interactive .sample-type strong{font-size:clamp(45px,5vw,72px)}
  .page-web-interactive .swatches{margin:27px 0 18px}

  .page-web-interactive .mobile-exhibit{margin:0;padding:78px var(--pad) 85px;background:#fff}
  .page-web-interactive .mobile-title h2{font-size:clamp(37px,4vw,60px);line-height:1.1;font-weight:430}
  .page-web-interactive .mobile-title>p:last-child{font-size:15px}
  .page-web-interactive .phones{max-width:1050px;padding:55px 0 20px;gap:5vw}
  .page-web-interactive .phone-presentation,.page-web-interactive .phone-presentation:nth-child(2),.page-web-interactive .phone-presentation:nth-child(3){transform:perspective(1100px) translate3d(0,var(--phone-scene-y,0px),0) rotateY(var(--phone-scene-turn,0deg)) rotateZ(var(--phone-angle,0deg));transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .page-web-interactive .phone-presentation:nth-child(1){--phone-angle:-5deg}
  .page-web-interactive .phone-presentation:nth-child(2){--phone-angle:3deg;margin-top:40px}
  .page-web-interactive .phone-presentation:nth-child(3){--phone-angle:5deg}
  .page-web-interactive .phone-presentation:hover{--phone-scene-y:-16px;--phone-scene-turn:7deg}

  .page-web-interactive .section-block{display:grid;grid-template-columns:minmax(230px,.58fr) minmax(0,1fr);gap:25px 6vw;margin:0;padding:80px var(--pad);background:#fff}
  .page-web-interactive .section-rule{display:block;align-self:start;position:sticky;top:85px}
  .page-web-interactive .section-rule h2{font-size:clamp(29px,3.1vw,47px);line-height:1.08;font-weight:430;letter-spacing:-.04em}
  .page-web-interactive .section-rule span{display:block;margin-top:25px;font-size:10px}
  .page-web-interactive .section-block .service-rows{grid-column:2;grid-row:1}
  .page-web-interactive .section-block .service-row{grid-template-columns:28px minmax(145px,.8fr) minmax(175px,1fr);gap:15px;padding:25px 0;border-top:1px solid #17191b3b;transition:padding-left .35s,background .35s}
  .page-web-interactive .section-block .service-row:hover{padding-left:12px;background:#c9ff1b24}
  .page-web-interactive .section-block .service-row h3{font-size:clamp(18px,1.6vw,26px)}
  .page-web-interactive .section-block .service-row p{font-size:12px}
  .page-web-interactive .section-block .service-row .row-meta{grid-column:2/-1;text-align:left;font-size:11px}
  .page-web-interactive .section-block>.small-note,.page-web-interactive .section-block>.text-link{grid-column:2;margin:0;max-width:60ch}

  .page-web-interactive .service-depth{padding:80px var(--pad);background:#f8f9f6}
  .page-web-interactive .service-depth>h2{font-size:clamp(34px,3.6vw,56px);font-weight:430}
  .page-web-interactive .depth-intro{font-size:16px;line-height:1.65;max-width:70ch}
  .page-web-interactive .depth-grid{display:block;margin-top:45px}
  .page-web-interactive .depth-grid article{display:grid;grid-template-columns:minmax(220px,.55fr) minmax(0,1fr);gap:3vw;align-items:start;border-top:1px solid #17191b35;padding:27px 0}
  .page-web-interactive .depth-grid h3{font-size:clamp(22px,2.5vw,37px);line-height:1.12;font-weight:430}
  .page-web-interactive .depth-grid p{font-size:14px;line-height:1.65}
  .page-web-interactive .depth-process{display:grid;grid-template-columns:1fr 1fr;gap:0 35px}
  .page-web-interactive .depth-process li{grid-template-columns:30px 1fr;gap:18px}
  .page-web-interactive .depth-process li>div{display:block}
  .page-web-interactive .depth-process h3{font-size:21px;margin-bottom:10px}
  .page-web-interactive .depth-process p{font-size:13px;line-height:1.65}
  .page-web-interactive .depth-faq{max-width:950px;margin-left:auto}
  .page-web-interactive .depth-faq summary{font-size:17px}
  .page-web-interactive .project-cta{margin:0;padding:80px var(--pad);background:#121416;color:#fff;border:0}
  .page-web-interactive .project-cta h2,.page-web-interactive:lang(ru) .project-cta h2{font-size:clamp(45px,6vw,90px);line-height:.99;font-weight:430}
  .page-web-interactive .project-cta h2 a>span{display:grid;place-items:center;width:70px;height:70px;background:var(--lime);color:var(--ink);font-size:32px}
  .page-web-interactive .site-footer{background:#121416;color:#fff;border-color:#fff4}
}
@media(min-width:768px) and (max-width:1050px){
  .page-web-interactive .site-header nav{position:absolute;top:75px;left:50%;gap:20px}
  .page-web-interactive .creative-hero.web-intro{min-height:700px;padding-top:90px}
  .page-web-interactive .web-intro h1{margin:20px 0 35px!important}
  .page-web-interactive .web-intro .hero-summary{width:39%}
  .page-web-interactive .web-intro .hero-summary p{font-size:14px}
  .page-web-interactive .web-intro .assembly-section{inset:0 0 0 42%}
  .page-web-interactive .assembly-laptop{top:37%;width:70%}
  .page-web-interactive .assembly-phone{left:78%;width:18%}
  .page-web-interactive .sequence-card{gap:3vw!important;padding:32px!important}
  .page-web-interactive .sequence-copy h3{font-size:clamp(28px,3.2vw,38px)}
  .page-web-interactive .sequence-copy>p{font-size:13px}
  .page-web-interactive .interface-exhibit{gap:35px}
  .page-web-interactive .section-block{grid-template-columns:minmax(200px,.5fr) minmax(0,1fr);gap:20px 35px}
  .page-web-interactive .section-block .service-row{grid-template-columns:24px 1fr;gap:9px 17px}
  .page-web-interactive .section-block .service-row p,.page-web-interactive .section-block .service-row .row-meta{grid-column:2}
}
@media(min-width:768px) and (max-height:650px){
  .page-web-interactive .sequence-card{position:relative;height:auto;min-height:550px}
}
@media(prefers-reduced-motion:reduce){
  .page-web-interactive .phone-presentation,.page-web-interactive .ui-sample{transition:none}
}

.page-web-interactive .device-art{position:relative;overflow:hidden}
.page-web-interactive .device-art img{display:block;width:100%;height:auto}
.page-web-interactive .brief-phone-frame{background:#f9faf7}
.page-web-interactive .brief-phone-preview{display:flex;flex-direction:column;min-height:100%;padding:18px 13px 14px;background:radial-gradient(circle at 100% 4%,#eaffb6 0,#fff 37%);color:#202024;text-align:left;overflow:hidden}
.page-web-interactive .brief-preview-brand{font-size:11px;letter-spacing:.18em}
.page-web-interactive .brief-preview-brand small{display:block;margin-top:5px;font-size:6px;letter-spacing:.12em}
.page-web-interactive .brief-phone-preview h3{margin:30px 0 9px;font-size:21px;line-height:1.1;letter-spacing:-.05em;font-weight:400}
.page-web-interactive .brief-phone-preview p{margin:0 0 24px;font-size:8px;line-height:1.45}
.page-web-interactive .brief-preview-field{display:block;margin:0 0 13px;padding:10px 8px;border:1px solid #20202427;font-size:7px;min-height:30px;background:#fff}
.page-web-interactive .brief-preview-message{min-height:60px}
.page-web-interactive .brief-preview-button{display:block;margin-top:auto;padding:11px 8px;background:#c9ff1b;font-size:7px;letter-spacing:.08em}

@media(max-width:767px){
  .page-web-interactive{--paper:#fff;--ink:#202024;--lime:#c9ff1b;background:#fff;color:var(--ink);overflow-x:clip}
  .page-web-interactive .site-header{min-height:73px;padding:15px 20px;background:#fff}
  .page-web-interactive .creative-hero.web-intro{display:block;min-height:0;margin:0;padding:29px 20px 32px;background:#fff}
  .page-web-interactive .web-intro .hero-eyebrow{display:block;margin:0 0 24px;font-size:9px;letter-spacing:.11em}
  .page-web-interactive .web-intro h1,.page-web-interactive:lang(ru) .web-intro h1{font-size:clamp(49px,13vw,68px)!important;line-height:.98!important;letter-spacing:-.055em!important;font-weight:400!important;margin:0 0 20px!important}
  .page-web-interactive .web-intro .hero-summary{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:0;max-width:none}
  .page-web-interactive .web-intro .hero-summary p{font-size:14px;line-height:1.55;max-width:27ch}
  .page-web-interactive .web-intro .circle-link{width:45px;height:45px;border:0;border-radius:0;background:var(--lime);font-size:22px}
  .page-web-interactive .device-hero{margin:0;background:#fff}
  .page-web-interactive .device-art{height:clamp(235px,65vw,310px);background:#e9eaeb}
  .page-web-interactive .device-art img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:52% 35%}
  .page-web-interactive .device-hero>figcaption{padding:14px 20px;font-size:8px;background:#fff}
  .page-web-interactive .case-intro{margin:0;padding:52px 20px;border-top:1px solid #20202425;background:#fff;gap:26px}
  .page-web-interactive .case-intro h2{font-size:clamp(43px,12vw,59px)!important;font-weight:400;line-height:1;letter-spacing:-.05em}
  .page-web-interactive .case-brief{font-size:14px;line-height:1.6}
  .page-web-interactive .case-brief h3{font-size:21px}
  .page-web-interactive .web-card-sequence{display:block;margin:0;padding:35px 0 0;background:#fff}
  .page-web-interactive .sequence-heading{display:block;margin:0;padding:0 20px 27px}
  .page-web-interactive .sequence-heading>p{font-size:9px;letter-spacing:.1em;margin-bottom:18px}
  .page-web-interactive .sequence-heading>h2{width:auto;font-size:37px;line-height:1.05;font-weight:400}
  .page-web-interactive .web-stack{margin:0;background:#fff;perspective:none}
  .page-web-interactive .sequence-card,.page-web-interactive .sequence-card:nth-child(2),.page-web-interactive .sequence-card:nth-child(3){position:relative;top:auto;display:flex;flex-direction:column;gap:24px;min-height:0;height:auto;margin:0!important;padding:39px 20px 43px;border:0;border-top:1px solid #20202428;border-radius:0;box-shadow:none;background:#fff;transform:none!important;backdrop-filter:none}
  .page-web-interactive .sequence-card:nth-child(2){background:#f8ffea}
  .page-web-interactive .sequence-copy{max-width:none;width:100%}
  .page-web-interactive .sequence-number{margin:0 0 20px;font-size:9px}
  .page-web-interactive .sequence-copy h3{font-size:33px;line-height:1.1;margin:0 0 16px;font-weight:400}
  .page-web-interactive .sequence-copy>p{font-size:14px;line-height:1.55;margin:0 0 18px}
  .page-web-interactive .sequence-screen,.page-web-interactive .sequence-card:nth-child(2) .sequence-screen,.page-web-interactive .sequence-card:nth-child(3) .sequence-screen{width:100%;margin:0;transform:none!important;border:1px solid #20202425;border-radius:0;box-shadow:0 16px 27px #20202412;background:#fff}
  .page-web-interactive .sequence-screen img{display:block;width:100%;max-height:none;height:auto;object-fit:contain}
  .page-web-interactive .sequence-browser{font-size:8px}
  .page-web-interactive .interface-exhibit{display:block;margin:0;padding:52px 20px 58px;background:#fff;color:var(--ink);border-top:1px solid #20202425}
  .page-web-interactive .interface-title h2{font-size:37px;line-height:1.08}
  .page-web-interactive .interface-title>p:last-child{font-size:14px;line-height:1.55}
  .page-web-interactive .interface-board{gap:1px;margin-top:27px;border:1px solid #20202430;background:#20202430}
  .page-web-interactive .ui-sample{min-height:145px;border:0;border-radius:0;box-shadow:none;background:#fff}
  .page-web-interactive .demo-nav a{border:1px solid #20202470;border-radius:0;background:#fff;box-shadow:none;color:var(--ink)}
  .page-web-interactive .sample-cta{background:#f8ffea}
  .page-web-interactive .glass-demo{background:var(--lime);border:0;border-radius:0;box-shadow:none}
  .page-web-interactive .mobile-exhibit{margin:0;padding:54px 20px 65px;background:#fff;border-top:1px solid #20202425}
  .page-web-interactive .mobile-title h2{font-size:37px;line-height:1.08}
  .page-web-interactive .mobile-title>p:last-child{font-size:14px;line-height:1.55}
  .page-web-interactive .phones{gap:14px}
  .page-web-interactive .phone-presentation{transform:none!important}
  .page-web-interactive .brief-phone-frame{overflow:hidden}
  .page-web-interactive .section-block,.page-web-interactive .service-depth{background:#fff}
  .page-web-interactive .project-cta{margin:0;background:var(--lime);color:var(--ink)}
  .page-web-interactive .project-cta h2,.page-web-interactive:lang(ru) .project-cta h2{font-size:clamp(39px,11vw,62px);font-weight:400}
  .page-web-interactive .project-cta h2 a>span{background:var(--ink);color:var(--lime)}
}

/* The three website scenes keep their layered hand-off without three full
   viewport-length chapters. The copy remains in the document for indexing. */
@media(min-width:768px){
 .page-web-interactive .web-card-sequence{padding-top:48px}
 .page-web-interactive .sequence-heading{padding-bottom:32px}
 .page-web-interactive .sequence-card,
 .page-web-interactive .sequence-card:nth-child(2),
 .page-web-interactive .sequence-card:nth-child(3){top:54px;height:clamp(490px,62svh,620px);min-height:490px;padding:28px var(--pad)}
 .page-web-interactive .sequence-number{margin-bottom:22px}
 .page-web-interactive .sequence-copy h3{margin-bottom:16px}
 .page-web-interactive .sequence-copy>p{margin-bottom:19px}
 .page-web-interactive .sequence-screen img{max-height:47svh}
 .page-web-interactive .service-depth{padding-top:58px;padding-bottom:58px}
 .page-web-interactive .service-depth>h2{margin:18px 0}
 .page-web-interactive .depth-grid{margin-top:28px}
 .page-web-interactive .depth-grid article{padding:17px 0}
 .page-web-interactive .service-depth h2.depth-subtitle{margin-top:48px}
 .page-web-interactive .depth-process{margin:20px 0}
 .page-web-interactive .depth-process li{padding:17px 0}
 .page-web-interactive .depth-faq details{padding:15px 0}
}