/* editorial.css */ @font-face{font-family:Onest;src:url("/assets/fonts/Onest-variable.ttf") format('truetype');font-weight:100 900;font-display:swap} :root{color-scheme:light;--paper:#eeeef0;--ink:#25242a;--rule:#25242a38;--pad:clamp(20px,4.2vw,80px)} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Onest,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:6px}a:focus-visible,video:focus-visible{outline:2px solid var(--ink);outline-offset:6px}::selection{background:#c8ff19}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:400}img,video{display:block;max-width:100%}img{height:auto}button,a,video{-webkit-tap-highlight-color:transparent}.skip-link{position:absolute;z-index:10;left:20px;top:-80px;background:var(--paper);padding:15px}.skip-link:focus{top:10px} .site-header{padding:28px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:32px;min-height:106px}.wordmark{font-size:24px;letter-spacing:-1.5px;line-height:1}.wordmark span{display:block;font-size:8px;letter-spacing:1px;margin-top:11px}.site-header nav{display:flex;gap:28px;align-items:center}.site-header nav a,.start-link{font-size:10px;letter-spacing:.05em;padding:14px 0}.site-header nav a[aria-current]{text-decoration:underline;text-underline-offset:7px}.start-link span{margin-left:14px}.eyebrow,.index,.section-label,.hero-tail,figcaption,.small-note,.row-meta,.site-footer,.work-index{font-size:11px;line-height:1.5;letter-spacing:.055em}.eyebrow{text-transform:uppercase}.editorial-hero{margin:40px var(--pad) 0;position:relative}.editorial-hero h1{font-size:clamp(90px,17.7vw,330px);font-weight:350;letter-spacing:-.085em;line-height:.8}.editorial-hero>.eyebrow{margin-bottom:40px}.heading-note{display:block;font-size:clamp(14px,1.2vw,20px);font-weight:400;line-height:1.5;letter-spacing:0;margin-top:40px}.ai-hero{min-height:calc(100svh - 160px);padding-top:20px}.ai-hero h1{position:relative;z-index:2;pointer-events:none}.hero-image{position:absolute;right:0;top:35px;width:47%;height:calc(100% - 70px);min-height:520px;z-index:1;overflow:hidden}.hero-image img{width:100%;height:calc(100% - 32px);object-fit:cover;object-position:58% center}.hero-image figcaption{padding-top:14px;font-size:9px}.hero-down{display:inline-block;font-size:12px;line-height:1.5;margin:50px 0 35px}.intro-block{margin:160px var(--pad) 130px;display:grid;grid-template-columns:1fr 1.3fr;gap:50px;border-top:1px solid var(--rule);padding-top:32px}.intro-block h2,.story-heading h2,.closing-note h2,.web-case h2{font-size:clamp(44px,6vw,100px);letter-spacing:-.065em;line-height:1.02}.lead{font-size:clamp(18px,1.65vw,26px);line-height:1.55;max-width:42ch;margin-top:36px;letter-spacing:-.025em}.section-block{margin:0 var(--pad) 140px}.section-label{display:flex;justify-content:space-between;gap:20px;margin-bottom:30px;text-transform:uppercase}.section-label h2{font-size:inherit}.service-row{border-top:1px solid var(--rule);display:grid;grid-template-columns:.2fr 1fr 1.25fr .65fr;gap:26px;padding:35px 0}.service-row h3{font-size:clamp(21px,2.2vw,36px);line-height:1.15;letter-spacing:-.04em}.service-row p{font-size:16px;line-height:1.6;max-width:40ch}.row-meta{font-size:12px;text-align:right;letter-spacing:0}.small-note{max-width:60ch;letter-spacing:0;font-size:13px;margin-top:18px;line-height:1.6}.image-story{margin:0 var(--pad) 150px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:9vw}.story-heading .eyebrow{margin-bottom:35px}.story-heading p:not(.eyebrow){font-size:17px;line-height:1.6;max-width:30ch;margin-top:32px}.text-link{display:inline-block;font-size:13px;line-height:1.6;border-bottom:1px solid var(--rule);padding:12px 0;margin-top:24px}.editorial-figure img{width:100%;object-fit:cover}.editorial-figure.portrait{max-width:520px}.editorial-figure figcaption,figure>figcaption{display:flex;justify-content:space-between;gap:16px;padding-top:14px;font-size:10px;letter-spacing:.02em}.type-hero h1{font-size:15.9vw}.indent{display:block;margin-left:20%}.type-hero .heading-note{margin-left:20%}.hero-tail{display:flex;justify-content:space-between;margin:55px 0 45px;align-items:end}.full-bleed{margin:0 var(--pad)}.full-bleed img{max-height:680px;object-fit:cover}.wide-story{grid-template-columns:.65fr 1.35fr;gap:6vw}.closing-note{margin:100px var(--pad) 150px;padding-left:32%}.closing-note .eyebrow{margin-bottom:30px}.closing-note>p:not(.eyebrow){font-size:18px;line-height:1.65;max-width:40ch;margin-top:35px}.web-hero h1{font-size:12vw;position:relative;z-index:1}.web-hero .heading-note{margin-top:36px}.web-still{margin:45px 0 0 25%}.web-still img{width:100%;max-height:660px;object-fit:cover}.web-case{margin:0 var(--pad) 160px;border-top:1px solid var(--rule);padding-top:30px}.web-case h2{font-size:clamp(50px,9vw,145px);margin-top:40px}.case-description{max-width:45ch;margin:45px 0 0 50%;font-size:18px;line-height:1.6}.case-description p+p{margin-top:20px}.work-hero h1{font-size:15vw}.work-hero .heading-note{margin-left:20%}.work-index{margin:0 var(--pad) 100px;display:flex;gap:30px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:20px}.work-index a{padding:10px 0}.work-item{margin:0 var(--pad) 170px;border-top:1px solid var(--rule);padding-top:32px;scroll-margin-top:30px}.work-heading{display:grid;grid-template-columns:1fr 1fr;column-gap:8vw;margin-bottom:45px}.work-heading .eyebrow{grid-column:1/-1;margin-bottom:28px}.work-heading h2{font-size:clamp(42px,5vw,82px);letter-spacing:-.06em;line-height:1.1}.work-heading p{font-size:17px;line-height:1.65;max-width:38ch}.work-heading .text-link{grid-column:2;justify-self:start}.work-item video{width:100%;max-height:85svh;background:#e3e3e6;object-fit:contain;aspect-ratio:16/9}.portrait-work{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}.portrait-work .work-heading{display:block;padding-top:30px}.portrait-work h2{margin:35px 0}.portrait-work .text-link{margin-top:30px}.portrait-work figure{max-width:560px}.portrait-work video{aspect-ratio:9/16;max-height:85svh}.project-cta{margin:0 var(--pad);padding:50px 0 90px;border-top:1px solid var(--rule)}.project-cta h2{font-size:clamp(82px,15.5vw,260px);line-height:.82;letter-spacing:-.075em;margin:50px 0 35px;font-weight:350}.project-cta h2 a{display:block;position:relative}.project-cta h2 a:hover{text-decoration:none;opacity:.7}.project-cta h2 span{position:absolute;right:5%;top:0;font-weight:200}.project-cta>p:last-child{font-size:16px;margin-left:2px}.site-footer{padding:26px var(--pad);border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:25px;align-items:center}.site-footer nav{display:flex;gap:25px}.site-footer a{padding:12px 0}.site-footer p{letter-spacing:0} @media(min-width:1800px){body{max-width:2200px;margin:auto}} @media(max-width:1000px){.site-header{gap:20px;flex-wrap:wrap}.site-header nav{gap:20px;order:3;width:100%;justify-content:space-between}.ai-hero{min-height:620px}.hero-image{min-height:480px}.service-row{grid-template-columns:25px 1fr 1.3fr;gap:20px}.row-meta{grid-column:2/-1;text-align:left}.portrait-work{gap:40px}.site-footer{flex-wrap:wrap}.site-footer p{display:none}} @media(max-width:600px){.site-header{padding:22px var(--pad) 16px;gap:22px}.site-header nav{gap:10px}.site-header nav a{font-size:9px;letter-spacing:0;padding:12px 0}.wordmark{font-size:22px}.start-link{font-size:9px}.editorial-hero{margin-top:30px}.editorial-hero>.eyebrow{font-size:9px;margin-bottom:30px}.ai-hero{min-height:0;padding-top:0}.editorial-hero h1{font-size:28vw;line-height:.84}.ai-hero h1{font-size:29vw}.heading-note{font-size:14px;max-width:25ch;margin-top:26px}.hero-image{position:relative;top:auto;right:auto;width:100%;height:430px;min-height:0;margin-top:30px}.hero-image img{object-position:59% center}.hero-down{margin:25px 0 0}.intro-block{margin:85px var(--pad) 75px;grid-template-columns:1fr;gap:28px;padding-top:20px}.intro-block h2,.story-heading h2,.closing-note h2{font-size:44px}.lead{font-size:18px;margin-top:25px}.section-block{margin-bottom:80px}.section-label{font-size:10px;gap:25px;align-items:start}.section-label span{max-width:120px;text-align:right}.service-row{grid-template-columns:22px 1fr;gap:16px 12px;padding:25px 0}.service-row h3{font-size:25px}.service-row p{grid-column:2;font-size:15px;line-height:1.6}.row-meta{grid-column:2;font-size:12px}.image-story,.wide-story{grid-template-columns:1fr;gap:35px;margin-bottom:80px}.story-heading h2{font-size:56px}.story-heading p:not(.eyebrow){font-size:16px;max-width:33ch;margin-top:25px}.editorial-figure.portrait{max-width:none;margin-left:40px}.editorial-figure figcaption,figure>figcaption{font-size:9px;flex-wrap:wrap;gap:8px}.type-hero h1{font-size:20vw}.indent{margin-left:10%}.type-hero .heading-note,.work-hero .heading-note{margin-left:10%}.hero-tail{margin:35px 0;font-size:11px;gap:20px}.full-bleed img{min-height:280px;object-fit:cover}.closing-note{padding-left:0;margin:70px var(--pad) 85px}.closing-note>p:not(.eyebrow){font-size:17px}.web-hero h1{font-size:12vw;letter-spacing:-.07em;line-height:1}.web-still{margin:30px 0 0}.web-still img{min-height:310px;object-fit:cover;object-position:55% center}.web-case{margin-bottom:85px}.web-case h2{font-size:50px}.case-description{margin:30px 0 0;font-size:17px}.work-hero h1{font-size:17vw}.work-index{gap:10px 25px;margin-bottom:65px;font-size:10px}.work-item,.portrait-work{display:block;margin-bottom:80px;padding-top:20px}.work-heading{display:block;margin-bottom:30px}.work-heading h2{font-size:43px;margin:22px 0}.work-heading p{font-size:16px}.portrait-work .work-heading{padding-top:0}.portrait-work video{max-height:75svh}.work-heading .text-link{margin-top:16px}.project-cta{padding:30px 0 60px}.project-cta h2{font-size:22vw;margin-top:35px}.project-cta h2 span{right:0}.project-cta>p:last-child{font-size:14px}.site-footer{font-size:10px;gap:10px}.site-footer nav{gap:20px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} @media(max-width:600px){.story-heading h2{font-size:clamp(36px,12vw,56px)}} /* showcase.css */ /* BELOK editorial case studies. Shared with the production page shell. */ :root{--line:#25242a2b;--lime:#c8ff19;--gutter:clamp(20px,4.2vw,80px)} .site-header{position:relative;z-index:20}.site-header nav{gap:40px}.wordmark{font-size:26px}.site-header .start-link{border-bottom:1px solid #25242a44}.site-header a{transition:opacity .2s}.site-header a:hover{opacity:.6} .creative-hero{padding:45px var(--gutter) 36px}.hero-eyebrow{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.08em;margin-bottom:46px}.creative-hero h1{font-size:clamp(90px,14vw,270px);font-weight:350;line-height:.86;letter-spacing:-.085em}.creative-hero h1>span:not(.work-dot){display:block;margin-left:18%}.hero-summary{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-top:38px}.hero-summary p{font-size:clamp(15px,1.35vw,21px);line-height:1.6;letter-spacing:-.02em}.circle-link{width:58px;height:58px;border:1px solid #25242a66;border-radius:50%;display:grid;place-items:center;font-size:25px;flex-shrink:0;transition:background .25s,transform .25s}.circle-link:hover{background:var(--lime);text-decoration:none;transform:translateY(3px)} .campaign-pair{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin:20px var(--gutter) 0;height:min(670px,52vw)}.campaign-pair>a{display:block;position:relative;overflow:hidden}.campaign-pair img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.campaign-pair a:hover img{transform:scale(1.025)}.media-tag{position:absolute;bottom:20px;left:20px;right:20px;font-size:10px;letter-spacing:.07em;background:#f7f7f0d9;backdrop-filter:blur(12px);padding:16px 18px;display:flex;justify-content:space-between}.media-tag b{font-size:16px;font-weight:400}.caption-ruler{display:flex;justify-content:space-between;gap:20px;margin:0 var(--gutter);padding:20px 0;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.06em} .statement{margin:130px var(--gutter);display:grid;grid-template-columns:1.1fr 1fr;gap:26px 9vw}.statement>.eyebrow{grid-column:1/-1}.statement h2,.macro-copy h2,.fashion-copy h2,.visual-system h2,.interface-title h2,.mobile-title h2,.brief-exhibit h2{font-size:clamp(46px,6.8vw,112px);line-height:1.02;letter-spacing:-.065em}.statement-copy{padding-top:8px;font-size:clamp(17px,1.55vw,24px);line-height:1.6;max-width:38ch}.statement-copy p+p{margin-top:24px} .macro-story{margin:0 var(--gutter) 160px;display:grid;grid-template-columns:.8fr 1.4fr;gap:9vw;align-items:center}.macro-copy>.eyebrow,.fashion-copy>.eyebrow{margin-bottom:32px}.macro-copy h2{font-size:clamp(44px,5.4vw,90px)}.macro-copy>p:not(.eyebrow),.fashion-copy>p:not(.eyebrow){font-size:17px;line-height:1.65;max-width:32ch;margin-top:30px}.macro-images{position:relative;padding:0 0 90px 35px}.project-frame>a{display:block;position:relative;overflow:hidden}.project-frame img{display:block;width:100%;height:100%;object-fit:cover}.project-frame figcaption{font-size:9px;margin-top:12px}.macro-detail{width:80%}.macro-detail>a{aspect-ratio:1}.macro-product{width:75%;position:relative;margin:-60px 0 0 auto;box-shadow:-18px -18px 0 var(--paper)}.macro-product>a{aspect-ratio:1.5}.image-link{display:inline-block;position:absolute;bottom:20px;left:20px;right:auto;padding:13px 18px;background:#ffffffd9;backdrop-filter:blur(12px);border-radius:30px;font-size:11px;line-height:1.3;box-shadow:0 3px 20px #0000000d}.project-frame .image-link{opacity:0;transform:translateY(5px);transition:opacity .3s,transform .3s}.project-frame a:hover .image-link,.project-frame a:focus-visible .image-link{opacity:1;transform:none} .fashion-story{display:grid;grid-template-columns:1fr .85fr;align-items:start;gap:10vw;margin:0 var(--gutter) 150px}.fashion-image{position:relative}.fashion-image>img{width:100%;max-height:920px;object-fit:cover}.fashion-copy{padding-top:65px}.fashion-copy h2{font-size:clamp(44px,5.5vw,90px)}.fashion-inset{width:55%;margin:50px 0 0 auto}.fashion-inset img{width:100%;aspect-ratio:3/4;object-fit:cover} .visual-system{padding:75px var(--gutter) 85px;background:#e2e2e6;margin-bottom:140px;overflow:hidden}.visual-system-heading{display:grid;grid-template-columns:1fr 1fr;gap:30px 8vw}.visual-system-heading>.eyebrow{grid-column:1/-1}.visual-system h2{font-size:clamp(44px,5.3vw,86px)}.visual-system-heading>p:last-child{font-size:18px;line-height:1.7;max-width:37ch;padding-top:10px}.format-composition{height:660px;position:relative;margin:70px auto 0;max-width:1450px}.format-composition figure{position:absolute;box-shadow:0 25px 60px #25242a1c;background:var(--paper)}.format-composition img{width:100%;height:100%;object-fit:cover}.format-composition figcaption{font-size:9px;letter-spacing:.05em;padding:12px;background:var(--paper)}.format-wide{width:69%;height:360px;left:0;top:30px;transform:rotate(-5deg)}.format-square{width:28%;aspect-ratio:1;left:30%;top:290px;z-index:3;transform:rotate(4deg)}.format-tall{width:26%;height:510px;right:1%;top:0;transform:rotate(6deg);z-index:2}.format-tall img{object-position:50% center}.presentation-note{font-size:12px;line-height:1.6;max-width:60ch;margin-top:25px}.section-rule{display:flex;justify-content:space-between;gap:30px;margin-bottom:26px;font-size:11px;text-transform:uppercase;letter-spacing:.05em}.section-rule h2{font-size:inherit}.production-line{margin:0 var(--gutter) 130px}.production-line ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:34px}.production-line li{border-top:1px solid var(--line);padding-top:22px}.production-line li>span{font-size:11px}.production-line h3{font-size:25px;letter-spacing:-.04em;margin:32px 0 17px}.production-line li p{font-size:15px;line-height:1.6;max-width:25ch} /* Website case: device photography, real screens, then interaction details. */ .web-intro{display:grid;grid-template-columns:1.4fr 1fr;column-gap:30px}.web-intro .hero-eyebrow{grid-column:1/-1}.web-intro h1{font-size:14vw}.web-intro h1>span:not(.work-dot){margin-left:0}.web-intro .hero-summary{display:block;align-self:end;max-width:36ch;justify-self:end;margin-bottom:10px}.web-intro .circle-link{margin-top:36px}.device-hero{margin:35px 0 0}.device-hero>img{width:100%;max-height:1000px;object-fit:cover}.device-hero>figcaption{padding:22px var(--gutter);font-size:10px;letter-spacing:.04em;border-bottom:1px solid var(--line)}.case-intro{margin:125px var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:10vw}.case-intro h2{font-size:clamp(58px,8vw,135px);line-height:.94;letter-spacing:-.075em;margin-top:35px}.tiny-lime{display:inline-block;color:#8da82e;font-size:.22em;vertical-align:middle;margin-left:16px}.case-brief{font-size:17px;line-height:1.65}.case-brief h3{font-size:23px;letter-spacing:-.03em;margin-bottom:20px}.case-brief dl{margin-top:34px}.case-brief dl>div{display:grid;grid-template-columns:.65fr 1fr;gap:25px;border-top:1px solid var(--line);padding:17px 0;font-size:12px;line-height:1.6}.case-brief dt{opacity:.65}.case-brief dd{margin:0} .desktop-exhibit{padding:80px var(--gutter) 45px;background:#dedee3;margin-bottom:140px;overflow:hidden}.exhibit-caption{display:grid;grid-template-columns:.4fr 1fr .65fr;gap:40px;align-items:start;margin-bottom:65px}.exhibit-caption h2{font-size:clamp(38px,4.4vw,76px);line-height:1.05;letter-spacing:-.06em}.exhibit-caption>p:last-child{font-size:16px;line-height:1.65;max-width:29ch}.browser-window{position:relative;min-width:0}.browser-window>img,.browser-window>a>img{width:100%;height:auto;display:block}.browser-window>a{display:block;outline-offset:5px;cursor:zoom-in}.browser-bar{height:32px;background:#f7f7f9;border-radius:10px 10px 0 0;border:1px solid #ffffffa0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:9px;color:#777;letter-spacing:.06em}.browser-bar>span:first-child{color:#c0c0c6;letter-spacing:2px;font-size:7px}.browser-window figcaption{font-size:10px;letter-spacing:.015em;margin-top:15px}.main-screen{width:94%;margin:0 auto;transform:perspective(1600px) rotateY(-4deg) rotateX(2deg);transform-origin:center;filter:drop-shadow(0 25px 35px #25242a22)}.screen-side-note{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin:35px 3% 0}.screen-side-note .text-link{margin:0} .interface-exhibit{margin:0 var(--gutter) 105px;display:grid;grid-template-columns:.75fr 1.2fr;gap:8vw;align-items:center}.interface-title h2{font-size:clamp(40px,5.7vw,90px);margin-top:30px}.interface-title>p:last-child{max-width:30ch;font-size:16px;line-height:1.7;margin-top:30px}.interface-board{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ui-sample{padding:28px;min-height:220px;border:1px solid #ffffffce;background:linear-gradient(145deg,#fafafa,#e5e5e9);border-radius:3px;box-shadow:0 12px 30px #25242a07;position:relative}.sample-label{font-size:9px;letter-spacing:.08em;display:block}.sample-nav{grid-column:1/-1;min-height:140px}.demo-nav{display:flex;justify-content:center;gap:18px;margin-top:26px}.demo-nav a{padding:15px 22px;background:linear-gradient(130deg,#ffffffb0,#ffffff40);border:1px solid #fff;border-radius:12px;box-shadow:0 4px 10px #00000009;font-size:10px;letter-spacing:.06em}.demo-nav a:first-child{border-bottom-color:#a6c04d}.sample-cta{grid-column:1/-1;min-height:150px;background:radial-gradient(ellipse at 70% 50%,#d9e8b24d,transparent 65%),#e7e7eb}.glass-demo{display:flex;gap:22px;align-items:center;justify-content:center;margin:26px auto 0;width:max-content;max-width:100%;padding:18px 24px;font-size:11px;letter-spacing:.06em;border:1px solid #ffffffbf;border-radius:40px;background:linear-gradient(145deg,#ffffff50,#ffffff0b);box-shadow:inset 0 1px 1px #ffffffb3,inset 0 -1px 1px #332d3d0d,0 3px 7px #332d3d12,0 8px 18px #332d3d09}.glass-demo i{width:7px;height:7px;background:#b5d658;border-radius:50%}.sample-type strong{font-size:67px;font-weight:350;letter-spacing:-.05em;display:block;margin:15px 0}.sample-type p,.sample-colors p{font-size:12px;line-height:1.5}.swatches{display:flex;margin:42px 0 28px}.swatches span{width:54px;height:54px;border-radius:50%;background:var(--swatch);border:1px solid #00000008;box-shadow:0 4px 10px #00000008}.swatches span+span{margin-left:-10px}.screen-pair{margin:0 var(--gutter) 150px;display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:start}.screen-pair .browser-window:last-child{margin-top:100px}.screen-pair .browser-window{filter:drop-shadow(0 20px 26px #25242a13)} .mobile-exhibit{padding:80px var(--gutter) 100px;background:linear-gradient(140deg,#dedee3,#f6f6f7);margin-bottom:140px;overflow:hidden}.mobile-title{display:grid;grid-template-columns:1fr 1fr;gap:26px 10vw}.mobile-title .eyebrow{grid-column:1/-1}.mobile-title h2{font-size:clamp(46px,5.8vw,95px)}.mobile-title>p:last-child{font-size:18px;line-height:1.7;max-width:36ch;padding-top:10px}.phones{display:flex;gap:6vw;justify-content:center;align-items:start;padding:75px 0 20px;max-width:1300px;margin:auto}.phone-presentation{width:25%;max-width:300px;transform:rotate(-5deg)}.phone-presentation:nth-child(2){transform:translateY(45px) rotate(3deg)}.phone-presentation:nth-child(3){transform:rotate(7deg)}.phone-frame{position:relative;background:#25242a;border:1px solid #666;padding:7px;border-radius:38px;box-shadow:inset 0 0 0 2px #aaa,0 25px 45px #22222224;overflow:hidden}.phone-frame:before{content:'';position:absolute;z-index:1;top:13px;left:50%;transform:translateX(-50%);width:26%;height:13px;background:#17171b;border-radius:20px;display:none}.phone-frame img{width:100%;border-radius:30px}.phone-presentation figcaption{font-size:9px;margin-top:20px;justify-content:center}.brief-exhibit{margin:0 var(--gutter) 140px;display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw;align-items:center}.brief-exhibit h2{font-size:clamp(42px,5vw,82px);margin-top:30px}.brief-exhibit>div>p:last-of-type{font-size:17px;line-height:1.7;max-width:30ch;margin-top:25px}.brief-exhibit .browser-window{box-shadow:0 20px 45px #25242a18;transform:rotate(-2deg)} /* Work: films are the centrepiece; useful descriptions replace poetic labels. */ .work-intro h1{font-size:26vw;line-height:.85}.work-dot{color:#737a64}.work-preview-strip{display:grid;grid-template-columns:1.2fr .8fr 1.2fr;gap:18px;margin:20px var(--gutter) 110px;align-items:end}.work-preview-strip>a{display:block}.work-preview-strip img{height:260px;width:100%;object-fit:cover}.work-preview-strip>a:nth-child(2) img{height:330px;object-position:50% 65%}.work-preview-strip a>span{display:flex;justify-content:space-between;gap:15px;padding:18px 0;font-size:10px;letter-spacing:.035em;border-bottom:1px solid var(--line)}.work-preview-strip b{font-weight:400}.film-case{padding:40px var(--gutter) 100px;scroll-margin-top:25px}.film-case+.film-case{border-top:1px solid var(--line)}.film-case-heading{display:grid;grid-template-columns:1.2fr .75fr;gap:8vw;align-items:end;margin-bottom:45px}.film-case-heading h2{font-size:clamp(42px,5.1vw,86px);line-height:1.03;letter-spacing:-.06em;margin-top:27px}.film-case-heading h2>span{display:block;font-size:.45em;letter-spacing:-.035em;margin-top:16px}.film-case-heading>p{font-size:17px;line-height:1.7;max-width:36ch}.film-player video{width:100%;aspect-ratio:16/9;object-fit:contain;background:#e1e1e5;max-height:85svh}.film-player figcaption{font-size:9px;margin-top:15px}.film-spec{display:grid;grid-template-columns:.7fr 1.3fr auto;gap:30px;align-items:start;border-top:1px solid var(--line);margin-top:36px;padding-top:25px}.film-spec h3{font-size:12px;letter-spacing:.04em;text-transform:uppercase}.film-spec ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.8}.film-spec .text-link{margin:0;font-size:11px;padding-top:0}.film-stills{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:50px}.film-stills img{width:100%;height:290px;object-fit:cover}.film-stills figcaption{font-size:9px;margin-top:12px}.film-portrait .film-presentation{display:grid;grid-template-columns:1fr .65fr;gap:10vw;align-items:center}.film-portrait .film-player{max-width:560px;margin:auto;width:100%}.film-portrait .film-player video{aspect-ratio:9/16;max-height:85svh}.film-portrait .film-spec{display:block;border:0}.film-portrait .film-spec ul{margin:26px 0}.film-portrait .film-stills{margin-left:30%;gap:20px}.film-portrait .film-stills img{height:360px;object-position:50% 40%}.project-cta{margin-top:30px}.project-cta h2{font-size:13.5vw} .screen-dialog{border:0;padding:45px 20px 20px;background:#eeeef0;max-width:min(1500px,95vw);max-height:94svh;box-shadow:0 20px 80px #0005}.screen-dialog::backdrop{background:#17171ba8;backdrop-filter:blur(8px)}.screen-dialog img{max-height:80svh;max-width:100%;object-fit:contain}.screen-dialog button{position:absolute;right:14px;top:8px;border:0;background:transparent;font:inherit;font-size:14px;padding:7px;cursor:pointer}.screen-dialog p{font-size:12px;margin-top:10px}.screen-dialog button:focus-visible{outline:2px solid #25242a} @media(min-width:901px) and (prefers-reduced-motion:no-preference){.browser-window>a>img{transition:filter .3s}.browser-window>a:hover>img{filter:brightness(1.025)}.entering{animation:enter-showcase .65s both}@keyframes enter-showcase{from{transform:translateY(22px);opacity:.35}to{transform:translateY(0);opacity:1}}} @media(max-width:1000px){.site-header nav{gap:20px}.creative-hero h1{font-size:14vw}.campaign-pair{height:58vw}.macro-story{gap:5vw}.macro-images{padding-left:0}.interface-exhibit{grid-template-columns:.8fr 1.2fr;gap:5vw}.ui-sample{padding:20px}.demo-nav{gap:8px}.demo-nav a{padding:13px 15px}.sample-type strong{font-size:48px}.swatches span{width:42px;height:42px}.exhibit-caption{grid-template-columns:1fr 1fr}.exhibit-caption>.eyebrow{grid-column:1/-1}.format-composition{height:510px}.format-wide{height:280px}.format-square{top:240px}.format-tall{height:390px}.film-spec{grid-template-columns:1fr 1fr}.film-spec .text-link{grid-column:2}.production-line ol{gap:20px}.production-line h3{font-size:21px}.phone-frame{border-radius:28px;padding:6px}.phone-frame img{border-radius:22px}} @media(max-width:600px){ .site-header nav{gap:16px}.site-header nav a{font-size:9px;min-height:40px;display:flex;align-items:center}.site-header{padding-top:22px;gap:14px}.site-header .wordmark{font-size:23px}.creative-hero{padding-top:30px}.hero-eyebrow{font-size:8px;margin-bottom:30px;line-height:1.5}.hero-eyebrow>span{display:none}.creative-hero h1{font-size:16vw;line-height:.9}.creative-hero h1>span:not(.work-dot){margin-left:7%}.hero-summary{margin-top:27px;gap:16px;align-items:center}.hero-summary p{font-size:14px;max-width:25ch}.circle-link{width:43px;height:43px;font-size:20px}.campaign-pair{grid-template-columns:1.5fr 1fr;gap:8px;height:360px;margin-top:0}.campaign-product img{object-position:50% center}.media-tag{left:8px;right:8px;bottom:8px;padding:11px 9px;font-size:8px;letter-spacing:0;gap:5px;align-items:center}.media-tag b{font-size:12px}.caption-ruler{font-size:8px;gap:10px;line-height:1.5;padding:15px 0}.statement{margin:70px var(--gutter);grid-template-columns:1fr;gap:25px}.statement h2{font-size:49px}.statement-copy{font-size:17px;padding-top:0;max-width:34ch}.statement-copy p+p{margin-top:18px}.macro-story{grid-template-columns:1fr;gap:35px;margin-bottom:70px}.macro-copy h2{font-size:48px}.macro-copy>p:not(.eyebrow),.fashion-copy>p:not(.eyebrow){font-size:16px;max-width:34ch;margin-top:23px}.macro-images{padding:0 0 15px}.macro-detail{width:77%}.macro-product{margin-top:-40px;width:76%;box-shadow:-9px -9px 0 var(--paper)}.project-frame .image-link{display:none}.fashion-story{grid-template-columns:1fr;gap:35px;margin-bottom:75px}.fashion-image{margin-right:30px}.fashion-image>img{max-height:640px}.fashion-copy{padding-top:0}.fashion-copy h2{font-size:50px}.fashion-inset{width:42%;margin-top:30px}.fashion-inset img{aspect-ratio:1}.visual-system{padding:45px var(--gutter) 45px;margin-bottom:75px}.visual-system-heading{grid-template-columns:1fr;gap:25px}.visual-system h2{font-size:40px}.visual-system-heading>p:last-child{font-size:16px;padding:0}.format-composition{height:380px;margin-top:35px}.format-wide{top:30px;width:78%;height:170px}.format-square{top:200px;left:7%;width:45%}.format-tall{width:36%;height:245px;right:0;top:105px}.format-composition figcaption{font-size:7px;padding:8px;letter-spacing:0}.presentation-note{font-size:11px;margin-top:15px}.section-rule{font-size:10px;line-height:1.5;gap:20px}.section-rule>span{font-size:8px;text-align:right;max-width:90px}.production-line{margin-bottom:70px}.production-line ol{grid-template-columns:1fr 1fr;gap:30px 20px}.production-line h3{font-size:21px;margin:22px 0 15px;line-height:1.2}.production-line li p{font-size:14px}.web-intro{display:block}.web-intro h1{font-size:24vw}.web-intro h1>span:not(.work-dot){margin-left:0}.web-intro .hero-summary{display:flex;margin-bottom:0;max-width:none}.device-hero{margin-top:0}.device-hero>img{height:auto;min-height:270px;object-fit:cover;object-position:50% center}.device-hero>figcaption{font-size:8px;line-height:1.6;padding:16px var(--gutter)}.case-intro{margin:65px var(--gutter);grid-template-columns:1fr;gap:30px}.case-intro h2{font-size:65px;margin-top:25px}.case-brief{font-size:16px}.case-brief h3{font-size:20px}.case-brief dl>div{font-size:11px;gap:20px}.desktop-exhibit{padding:40px 12px 30px;margin-bottom:70px}.exhibit-caption{display:block;padding:0 8px;margin-bottom:30px}.exhibit-caption h2{font-size:38px;margin-top:25px}.exhibit-caption>p:last-child{font-size:15px;margin-top:22px;max-width:34ch}.main-screen{width:100%;transform:none}.browser-bar{height:22px;padding:0 10px;font-size:7px;border-radius:6px 6px 0 0}.browser-bar>span:first-child{font-size:5px}.browser-window figcaption{font-size:8px;line-height:1.5;margin-top:9px}.screen-side-note{margin:20px 8px 0;font-size:8px;gap:20px}.screen-side-note .text-link{font-size:10px}.interface-exhibit{display:block;margin-bottom:50px}.interface-title h2{font-size:45px;margin-top:23px}.interface-title>p:last-child{font-size:16px;max-width:34ch;margin-top:22px}.interface-board{margin-top:30px;gap:10px}.ui-sample{padding:18px;min-height:180px}.sample-label{font-size:8px;line-height:1.5}.sample-nav{min-height:128px;padding:18px 13px}.demo-nav{gap:6px;margin-top:23px}.demo-nav a{padding:13px 11px;font-size:8px;letter-spacing:0}.sample-cta{min-height:144px}.glass-demo{font-size:9px;padding:17px 20px;gap:18px}.sample-type strong{font-size:40px;margin-top:23px}.sample-type p,.sample-colors p{font-size:10px}.swatches{margin:33px 0 23px}.swatches span{width:35px;height:35px;flex-shrink:0}.screen-pair{grid-template-columns:1fr;gap:35px;margin-bottom:70px}.screen-pair .browser-window:last-child{margin-top:0}.mobile-exhibit{padding:42px var(--gutter) 70px;margin-bottom:75px}.mobile-title{display:block}.mobile-title h2{font-size:40px;margin-top:25px}.mobile-title>p:last-child{font-size:16px;margin-top:22px;padding:0}.phones{padding-top:35px;gap:12px;flex-wrap:wrap;align-items:start}.phone-presentation{width:43%;max-width:180px;transform:rotate(-4deg)}.phone-presentation:nth-child(2){transform:translateY(25px) rotate(4deg)}.phone-presentation:nth-child(3){width:45%;transform:rotate(-3deg);margin-top:20px}.phone-frame{padding:4px;border-radius:22px;box-shadow:inset 0 0 0 1px #aaa,0 15px 25px #22222220}.phone-frame img{border-radius:17px}.phone-presentation figcaption{font-size:7px;margin-top:12px}.brief-exhibit{display:block;margin-bottom:70px}.brief-exhibit h2{font-size:43px;margin-top:25px}.brief-exhibit>div>p:last-of-type{font-size:16px;max-width:33ch}.brief-exhibit .browser-window{margin-top:30px;transform:none}.work-intro h1{font-size:27vw}.work-preview-strip{gap:8px;margin:0 var(--gutter) 55px;grid-template-columns:1fr 1fr 1fr}.work-preview-strip img{height:120px}.work-preview-strip>a:nth-child(2) img{height:155px}.work-preview-strip a>span{font-size:8px;line-height:1.6;min-height:58px;padding:12px 0;gap:5px}.work-preview-strip b{display:none}.film-case{padding-top:25px;padding-bottom:65px}.film-case-heading{display:block;margin-bottom:28px}.film-case-heading .eyebrow{font-size:8px}.film-case-heading h2{font-size:39px;margin-top:23px}.film-case-heading h2>span{font-size:22px;margin-top:12px}.film-case-heading>p{font-size:16px;max-width:34ch;margin-top:25px}.film-player figcaption{font-size:8px;gap:7px;margin-top:10px}.film-spec{display:block;margin-top:24px;padding-top:20px}.film-spec h3{font-size:10px}.film-spec ul{font-size:14px;margin-top:16px;line-height:1.7}.film-spec .text-link{margin-top:17px;font-size:11px}.film-stills{gap:12px;margin-top:28px}.film-stills img{height:140px}.film-stills figcaption{font-size:8px}.film-portrait .film-presentation{display:block}.film-portrait .film-player{width:85%}.film-portrait .film-spec{margin-top:25px}.film-portrait .film-stills{margin-left:0;gap:12px}.film-portrait .film-stills img{height:220px}.project-cta h2{font-size:22vw}.screen-dialog{padding:40px 8px 10px;max-width:98vw}.screen-dialog p{font-size:10px} } @media(prefers-reduced-motion:reduce){.entering{animation:none}.campaign-pair img,.circle-link{transition:none}} /* service-depth.css */ .page-languages{display:flex;align-items:center;gap:9px;font-size:11px;white-space:nowrap}.page-languages a{padding:10px 2px;opacity:.5}.page-languages a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:5px}.example-note{margin:40px var(--pad) 55px;max-width:750px;font-size:15px;line-height:1.7}.example-note a{display:block;margin-top:12px;text-decoration:underline;text-underline-offset:5px}.service-depth{padding:85px var(--pad);border-top:1px solid var(--rule)}.service-depth>h2{font-size:clamp(38px,5.3vw,84px);letter-spacing:-.055em;line-height:1.08;max-width:20ch;margin:28px 0}.depth-intro{font-size:clamp(17px,1.5vw,22px);line-height:1.7;max-width:75ch}.depth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:65px}.service-depth h3{font-size:24px;letter-spacing:-.025em;margin-bottom:18px}.depth-grid p,.depth-process p,.depth-faq p{font-size:16px;line-height:1.8;max-width:65ch}.depth-grid article{border-top:1px solid var(--rule);padding-top:25px}.service-depth h2.depth-subtitle{font-size:clamp(30px,3.5vw,54px);margin-top:90px}.depth-process{list-style:none;padding:0;margin:35px 0}.depth-process li{display:grid;grid-template-columns:60px 1fr;gap:30px;padding:28px 0;border-top:1px solid var(--rule)}.depth-process li>span{font-size:12px;padding-top:7px}.depth-process li>div{display:grid;grid-template-columns:.7fr 1.3fr;gap:45px}.depth-faq details{border-top:1px solid var(--rule);padding:24px 0}.depth-faq summary{cursor:pointer;font-size:20px;line-height:1.5}.depth-faq p{margin:18px 0 0;max-width:80ch}.depth-faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.site-header{column-gap:24px} @media(max-width:1000px){.page-languages{margin-left:auto}.site-header nav{order:4}.depth-grid{gap:24px}.depth-process li>div{grid-template-columns:1fr;gap:0}} @media(max-width:600px){.site-header{gap:12px}.wordmark span{font-size:6px}.start-link{margin-left:auto}.page-languages{font-size:10px;margin-left:0;gap:5px}.page-work .festival-overline{font-size:7px}.service-depth{padding:55px var(--pad)}.service-depth>h2{font-size:39px;overflow-wrap:break-word}.depth-grid{grid-template-columns:1fr;margin-top:35px;gap:30px}.service-depth h3{font-size:23px}.depth-grid p,.depth-process p,.depth-faq p{font-size:15px}.depth-process li{grid-template-columns:24px 1fr;gap:16px}.service-depth h2.depth-subtitle{margin-top:55px;font-size:33px}.depth-faq summary{font-size:18px}.example-note{font-size:14px;margin-top:25px;margin-bottom:35px}.page-work .festival-intro h2{font-size:39px}} /* spatial.css */ /* Progressive enhancement: the static composition is the no-script fallback. */ .assembly-section{margin:25px 0 80px}.assembly-stage{position:relative;min-height:790px;background:radial-gradient(ellipse at 60% 62%,#fafafa 0,#eeeef0 60%);isolation:isolate;overflow:hidden}.assembly-heading{position:absolute;top:35px;left:var(--pad);z-index:2;pointer-events:none}.assembly-heading h2{font-size:clamp(42px,5.4vw,86px);letter-spacing:-.055em;line-height:1;margin:20px 0}.assembly-world{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 45%;transform-style:preserve-3d}.assembly-laptop{position:absolute;left:25%;top:33%;width:55%;transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-17deg);will-change:transform}.laptop-screen{position:relative;aspect-ratio:1.6;border:12px solid #343439;border-radius:15px;background:#eeeef0;box-shadow:0 2px 0 2px #96969c,0 35px 50px #25242a25;transform-style:preserve-3d}.assembly-base{width:100%;height:100%;object-fit:cover;border-radius:4px;filter:saturate(.7)}.screen-camera{position:absolute;top:-8px;left:50%;width:5px;height:5px;border-radius:50%;background:#0d0d0f;z-index:2}.laptop-deck{position:absolute;top:100%;left:-3%;width:106%;height:180px;transform-origin:50% 0;transform:rotateX(72deg);border-radius:0 0 18px 18px;background:linear-gradient(100deg,#999aa2,#eeeeef 48%,#a6a6af);box-shadow:0 4px 0 #777781;backface-visibility:hidden}.deck-keys{position:absolute;left:12%;right:12%;top:12px;height:90px;border-radius:5px;background:repeating-linear-gradient(0deg,transparent 0 16px,#babac0 17px 21px),repeating-linear-gradient(90deg,#484851 0 24px,#bebec4 25px 30px)}.deck-trackpad{position:absolute;width:26%;height:48px;border:1px solid #8d8e96;bottom:12px;left:37%;border-radius:5px}.laptop-front{position:absolute;top:100%;left:-3%;width:106%;height:7px;border-radius:0 0 6px 6px;background:#bcbcc4;transform:translateY(55px) translateZ(168px);box-shadow:0 35px 45px #2223}.assembly-plane{position:absolute;background:#fafafbeF;box-shadow:0 12px 25px #25242a12;backface-visibility:hidden}.plane-nav{left:3%;right:3%;top:4%;padding:15px;display:flex;justify-content:space-between;align-items:center;gap:15px;transform:translateZ(30px)}.plane-nav b{font-size:20px;letter-spacing:-1px}.plane-nav>span{font-size:8px;letter-spacing:.07em}.plane-title{left:5%;top:30%;padding:20px 25px;background:#eeeef0df;transform:translateZ(60px);max-width:92%}.plane-title span{display:block;font-size:10px;letter-spacing:.1em;margin-bottom:12px}.plane-title strong{font-size:clamp(22px,3.1vw,50px);font-weight:400;letter-spacing:-.06em;line-height:1.05;white-space:nowrap}.plane-action{left:5%;right:5%;bottom:7%;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;transform:translateZ(90px)}.plane-action>span{font-size:10px;max-width:23ch;line-height:1.5}.plane-action a{font-size:9px;white-space:nowrap;border-radius:30px;background:#25242a;color:white;padding:15px 18px}.assembly-phone{position:absolute;top:42%;left:76%;width:13%;aspect-ratio:390/844;background:#25242a;border:7px solid #28282e;border-radius:25px;box-shadow:2px 0 0 2px #a5a5ad,12px 28px 45px #25242a25;overflow:hidden;transform:rotateY(-16deg) rotateZ(7deg) translateZ(100px);will-change:transform}.assembly-phone img{width:100%;height:100%;object-fit:cover}.phone-speaker{position:absolute;width:28%;height:8px;top:8px;left:36%;border-radius:10px;background:#25242a;z-index:2}.assembly-orbit{position:absolute;left:15%;right:6%;bottom:8%;height:25%;border:1px solid #25242a14;border-radius:50%;transform:rotateX(60deg);z-index:-1}.assembly-bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:35px;display:flex;align-items:center;gap:30px;justify-content:space-between;font-size:12px;z-index:5}.assembly-bottom>p{max-width:40ch}.assembly-bottom>a{font-size:10px;letter-spacing:.05em}.motion-control{border:0;border-bottom:1px solid #25242a50;padding:8px 0;color:inherit;background:none;font:inherit;cursor:pointer}.assembly-progress{position:absolute;bottom:0;left:var(--pad);right:var(--pad);height:1px;background:#25242a20}.assembly-progress>span{display:block;width:100%;height:2px;background:#25242a;transform:scaleX(var(--assembly-progress,0));transform-origin:left}.spatial-enabled .assembly-section{height:260svh}.spatial-enabled .assembly-stage{position:sticky;top:0;height:100svh;min-height:650px}.assembly-plane{will-change:transform}.assembly-section.motion-static{height:auto!important}.motion-static .assembly-stage{position:relative;height:790px}.motion-static .assembly-progress{display:none} @media(min-width:1700px){.assembly-laptop{width:50%;left:28%;top:29%}.assembly-phone{width:11%;left:77%}} @media(max-width:700px){.assembly-stage{min-height:700px}.assembly-heading{top:25px}.assembly-heading h2{font-size:43px}.assembly-laptop{width:76%;left:7%;top:40%}.laptop-screen{border-width:7px;border-radius:9px}.screen-camera{top:-5px;width:3px;height:3px}.laptop-deck{height:90px}.deck-keys{height:42px;top:8px;background:repeating-linear-gradient(0deg,transparent 0 7px,#babac0 8px 11px),repeating-linear-gradient(90deg,#484851 0 11px,#bebec4 12px 15px)}.deck-trackpad{height:23px;bottom:6px}.laptop-front{transform:translateY(28px) translateZ(84px);height:4px}.plane-nav{padding:8px}.plane-nav b{font-size:12px}.plane-nav>span{font-size:5px;letter-spacing:0}.plane-title{padding:12px}.plane-title span{font-size:6px;margin-bottom:7px}.plane-title strong{font-size:20px}.plane-action{padding:8px;gap:8px}.plane-action>span{font-size:5px}.plane-action a{font-size:5px;padding:8px}.assembly-phone{width:23%;left:69%;top:52%;border-width:4px;border-radius:14px}.phone-speaker{height:5px;top:4px}.assembly-bottom{bottom:25px;flex-wrap:wrap;gap:15px;font-size:11px}.assembly-bottom>p{width:100%;max-width:none}.assembly-bottom>a{font-size:9px}.spatial-enabled .assembly-section{height:190svh}.spatial-enabled .assembly-stage{min-height:600px}.motion-static .assembly-stage{height:700px}.assembly-section{margin-bottom:45px}} /* Spatial compositions are desktop-only. Mobile retains its previous layout. */ .spatial-gallery{height:auto;margin:20px 0 90px}.gallery-stage{height:760px;position:relative;overflow:hidden;isolation:isolate}.gallery-heading{position:absolute;top:30px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.07em;z-index:3}.gallery-space{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 45%;transform-style:preserve-3d}.gallery-screen{position:absolute;left:18%;top:14%;width:64%;height:68%;display:block;transform-style:preserve-3d;box-shadow:0 35px 55px #25242a26;background:#d5d5da;will-change:transform;overflow:hidden;border:1px solid #fff8;backface-visibility:hidden}.gallery-screen img{width:100%;height:100%;object-fit:cover;object-position:50% 57%}.gallery-screen:first-child img{object-position:50% 62%}.gallery-screen:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0009,transparent 60%);pointer-events:none}.gallery-number{position:absolute;right:25px;top:25px;color:white;font-size:12px;z-index:2}.gallery-screen-copy{position:absolute;left:35px;right:35px;bottom:35px;display:flex;flex-direction:column;align-items:flex-start;color:white;z-index:2;gap:12px}.gallery-screen-copy strong{font-size:clamp(30px,3.9vw,62px);font-weight:400;letter-spacing:-.04em;line-height:1.05}.gallery-screen-copy>span{font-size:14px}.gallery-screen-copy>b{font-size:11px;font-weight:400;padding:12px 18px;border:1px solid #fff8;border-radius:25px;margin-top:7px}.gallery-screen:nth-child(2){transform:translateX(69vw) translateZ(-380px) rotateY(-32deg)}.gallery-screen:nth-child(3){transform:translateX(138vw) translateZ(-760px) rotateY(-45deg)}.gallery-bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:25px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;z-index:3}.gallery-index{display:flex;gap:25px}.gallery-index span{padding:10px 5px;border-bottom:2px solid transparent;opacity:.4}.gallery-index span.is-active{opacity:1;border-color:var(--ink)}.spatial-enabled .spatial-gallery{height:300svh}.spatial-enabled .gallery-stage{position:sticky;top:0;height:100svh;min-height:600px}.spatial-gallery.motion-static{height:auto}.motion-static .gallery-stage{height:auto;min-height:0;position:relative;padding:75px var(--pad) 90px}.motion-static .gallery-space{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:25px;perspective:none}.motion-static .gallery-screen{position:relative;inset:auto;width:auto;height:440px;transform:none!important;opacity:1!important}.motion-static .gallery-screen-copy{left:20px;right:20px;bottom:25px}.motion-static .gallery-screen-copy strong{font-size:28px}.motion-static .gallery-screen-copy>span{font-size:12px}.motion-static .gallery-bottom{bottom:20px}.motion-static .gallery-index{display:none}.motion-static .gallery-bottom>p{visibility:hidden} @media(min-width:901px){.page-work .feature-stage,.page-work .feature-selector{display:none}.page-web-interactive .device-hero{display:none}.page-work:lang(ru) .festival-hero h1{font-size:13.5vw;letter-spacing:-.08em}.page-work:lang(ru) .fashion-cut-copy .display-word{font-size:6vw}.page-work:lang(ru) .character-heading .display-word{font-size:7vw}.page-work:lang(ru) .macro-title .display-word{font-size:10vw}.page-work:lang(ru) .macro-contact-sheet>p{font-size:3.2vw}.page-web-interactive:lang(ru) .creative-hero h1{font-size:13vw}.page-work:lang(ru) .project-cta h2,.page-web-interactive:lang(ru) .project-cta h2{font-size:10vw}} @media(max-width:900px){.assembly-section,.spatial-gallery{display:none!important}.page-work:lang(ru) .festival-hero h1{font-size:14.5vw}.page-work:lang(ru) .feature-name{font-size:clamp(36px,8vw,60px)}.page-web-interactive:lang(ru) .creative-hero h1{font-size:19vw}.page-work:lang(ru) .project-cta h2,.page-web-interactive:lang(ru) .project-cta h2{font-size:14vw}} @media(min-width:901px){.assembly-phone{width:12%;top:39%}.assembly-base{object-position:50% 45%}.page-web-interactive .case-intro h2{font-size:clamp(60px,8vw,130px)}} @media(min-width:901px){.page-work:lang(ru) .macro-title .display-word{font-size:9vw}.page-work:lang(ru) .macro-title .display-word>span{margin-left:10%}.page-work:lang(ru) .macro-title{gap:8vw}} @media(max-width:900px){.page-work:lang(ru) .macro-title .display-word{font-size:14vw}.page-work:lang(ru) .macro-title .display-word>span{margin-left:10%}.page-work:lang(ru) .fashion-cut-copy .display-word{font-size:11vw}.page-work:lang(ru) .macro-contact-sheet>p{font-size:6.5vw}} @media(min-width:901px){.assembly-laptop{width:min(55%,90svh)}.assembly-phone{width:min(12%,20svh)}} @media(min-width:901px){.assembly-laptop{top:29%}.assembly-bottom{bottom:24px}.assembly-bottom>a{padding:10px 0}.assembly-heading h2{max-width:10ch}} /* chapter-cards.css */ .web-card-sequence{display:none} @media(min-width:901px){ body.page-work,body.page-web-interactive{--paper:#ffffff;--ink:#202024;background:#ffffff}.site-header{min-height:84px;padding-top:18px;padding-bottom:18px}.wordmark span{margin-top:5px;letter-spacing:.6px}.page-work .site-header{min-height:84px;padding-top:18px;padding-bottom:18px}.festival-hero{padding-top:5px}.festival-overline{font-size:8px}.page-work .festival-hero h1,.page-work:lang(ru) .festival-hero h1{font-size:clamp(70px,8.3vw,145px);margin:18px 0 10px;justify-content:flex-start;gap:45px;letter-spacing:-.065em}.title-spark{font-size:.35em}.page-web-interactive .creative-hero,.page-web-interactive .web-intro{padding-top:20px;margin-top:0}.page-web-interactive .creative-hero h1,.page-web-interactive:lang(ru) .creative-hero h1{font-size:clamp(70px,8.1vw,140px);line-height:.94;margin:25px 0}.hero-summary{margin-top:25px}.spatial-gallery{margin-top:0}.gallery-stage{background:#ffffff}.gallery-screen{box-shadow:0 22px 55px #20202418}.gallery-screen-copy strong{font-size:clamp(30px,3vw,47px)}.festival-intro{margin-top:70px;margin-bottom:70px}.festival-intro h2{font-size:clamp(44px,4.5vw,70px)}.programme{background:#ffffffee;top:0}.assembly-stage{background:radial-gradient(ellipse at 48% 60%,#fff 0,#ffffff 70%)}.assembly-heading h2{font-size:clamp(40px,4.4vw,65px)}.assembly-laptop{left:16%;width:min(51%,82svh);top:30%}.assembly-phone{left:81%;width:min(11%,19svh);top:43%;transform:rotateY(-6deg) rotateZ(3deg);box-shadow:2px 0 0 2px #a5a5ad,12px 28px 45px #25242a18}.assembly-orbit{display:none}.laptop-screen{background:#fff}.assembly-plane.screen-slice{inset:0;width:100%;height:100%;max-width:none;padding:0;background:none;box-shadow:none;display:block;transform:none}.screen-slice img{width:100%;height:100%;object-fit:contain}.screen-slice.plane-nav{clip-path:inset(0 0 82% 0)}.screen-slice.plane-title{clip-path:inset(18% 0 20% 0)}.screen-slice.plane-action{clip-path:inset(80% 0 0 0)}.assembly-bottom{bottom:22px}.assembly-section{margin-bottom:45px}.case-intro{padding-top:45px;margin-top:0}.case-intro h2{font-size:clamp(48px,6vw,90px)!important}.case-intro{gap:6vw}.page-web-interactive .desktop-exhibit,.page-web-interactive .screen-pair,.page-web-interactive .brief-exhibit{display:none} .web-card-sequence{display:block;margin:75px var(--pad) 90px}.sequence-heading{display:flex;justify-content:space-between;align-items:start;gap:40px;margin-bottom:65px}.sequence-heading>p{font-size:10px;letter-spacing:.06em}.sequence-heading>h2{font-size:clamp(42px,4vw,66px);letter-spacing:-.05em;line-height:1.06;width:60%}.web-stack{position:relative;perspective:2000px}.sequence-card{position:relative;display:grid;grid-template-columns:.7fr 1.3fr;gap:4vw;align-items:center;min-height:calc(100svh - 110px);padding:55px 4vw;border:1px solid #2020241a;border-radius:22px;background:#ffffff;box-shadow:0 -10px 40px #2020240a;transform-origin:50% 20%;margin-bottom:30px}.sequence-card:nth-child(2){background:#ffffff}.sequence-card:nth-child(3){background:#ffffff}.sequence-copy{max-width:36ch}.sequence-number{display:block;font-size:10px;letter-spacing:.06em;margin-bottom:40px}.sequence-copy h3{font-size:clamp(32px,3.6vw,56px);line-height:1.05;letter-spacing:-.045em;margin-bottom:25px}.sequence-copy>p{font-size:16px;line-height:1.65;margin-bottom:30px}.sequence-copy>a{font-size:12px;border-bottom:1px solid #20202460;padding-bottom:8px}.sequence-screen{background:white;box-shadow:0 28px 50px #20202420;border:1px solid #20202418;border-radius:8px;overflow:hidden;transform:perspective(1200px) rotateY(-6deg) rotateZ(2deg);transition:transform .2s}.sequence-card:nth-child(2) .sequence-screen{transform:perspective(1200px) rotateY(5deg) rotateZ(-2deg)}.sequence-card:nth-child(3) .sequence-screen{transform:perspective(1200px) rotateY(-3deg) rotateZ(1deg)}.sequence-browser{display:flex;justify-content:space-between;padding:12px 16px;font-size:9px;border-bottom:1px solid #20202412}.sequence-screen img{width:100%;max-height:58svh;object-fit:contain;background:white}.sequence-screen a{display:block}.cards-motion [data-stack-card]{position:sticky;top:78px;will-change:transform;backface-visibility:hidden}.cards-motion .sequence-card+.sequence-card{margin-top:30svh} .film-stack{position:relative;margin:25px var(--pad) 90px;perspective:2000px}.film-stack .festival-film{position:relative;padding:28px 3.5vw 35px;min-height:calc(100svh - 115px);margin:0 0 30px;border:1px solid #2020241a;border-radius:22px;box-shadow:0 -12px 50px #2020240b;transform-origin:50% 15%;background:#ffffff;scroll-margin-top:80px}.film-stack .macro-cut{background:#ffffff}.film-stack .character-cut{background:#ffffff}.cards-motion .film-stack .festival-film{position:sticky;top:78px}.cards-motion .film-stack .festival-film+.festival-film{margin-top:30svh}.film-stack .film-overline{margin-bottom:24px;padding-bottom:15px;font-size:9px}.film-stack .fashion-cut-layout{grid-template-columns:1fr 1fr;gap:4vw;align-items:center}.film-stack .fashion-cut-copy{padding-top:0}.film-stack .fashion-cut-copy .display-word,.page-work:lang(ru) .film-stack .fashion-cut-copy .display-word{font-size:4.5vw}.film-stack .fashion-cut-copy h2{font-size:22px;margin:25px 0 16px}.film-stack .fashion-cut-copy>p:not(.display-word){font-size:15px;line-height:1.65;max-width:38ch}.film-stack .fashion-cut-still{display:none}.film-stack .portrait-player{width:auto;max-width:100%}.film-stack .portrait-player video{height:59svh;width:auto;max-width:100%;margin:auto;object-fit:contain}.film-stack .festival-player figcaption{font-size:8px}.film-stack .macro-cut,.film-stack .character-cut{display:grid;grid-template-columns:.75fr 1.25fr;gap:20px 4vw;align-content:center;align-items:center}.film-stack .macro-cut>.film-overline,.film-stack .character-cut>.film-overline{grid-column:1/-1;align-self:start}.film-stack .macro-title,.film-stack .character-heading{display:block;margin:0}.film-stack .macro-title .display-word,.page-work:lang(ru) .film-stack .macro-title .display-word,.film-stack .character-heading .display-word,.page-work:lang(ru) .film-stack .character-heading .display-word{font-size:4.5vw;margin:0 0 28px}.film-stack .macro-title .display-word>span{margin-left:0}.film-stack .macro-title h2,.film-stack .character-heading h2{font-size:23px}.film-stack .macro-title>div>p,.film-stack .character-heading>div>p{font-size:15px;line-height:1.65;margin-top:18px}.film-stack .macro-contact-sheet{display:none}.film-stack .festival-player video{background:transparent;max-height:59svh}.festival-visuals{background:#ffffff}.service-depth{background:#fff}.page-work .festival-formats{background:#ffffff}.interface-exhibit{background:#fff}.mobile-exhibit{background:#ffffff}.page-work .festival-intro h2 span{color:#25242a} } @media(min-width:901px) and (max-height:760px){.sequence-card{padding:30px 3vw}.sequence-copy h3{font-size:34px}.sequence-number{margin-bottom:20px}.sequence-copy>p{font-size:14px}.film-stack .fashion-cut-copy .display-word,.page-work:lang(ru) .film-stack .fashion-cut-copy .display-word{font-size:3.5vw}.film-stack .festival-film{padding-top:20px;padding-bottom:24px}.film-stack .fashion-cut-copy h2{margin-top:18px}.film-stack .film-overline{margin-bottom:15px}} @media(min-width:901px){.assembly-phone{left:77%}.screen-slice.plane-nav,.screen-slice.plane-title,.screen-slice.plane-action{clip-path:none}.screen-slice.plane-title{z-index:1}.screen-slice.plane-nav{z-index:2;opacity:0}.screen-slice.plane-action{z-index:3;opacity:0}.screen-slice.plane-nav img,.screen-slice.plane-action img{background:#fff;border:1px solid #20202420;border-radius:6px;box-shadow:0 20px 40px #20202420}.screen-slice.plane-action img{object-fit:contain}.motion-static .screen-slice.plane-nav,.motion-static .screen-slice.plane-action{display:none}} @media(min-width:901px){.film-stack .display-word{line-height:1.02}.gallery-screen:first-child{background:#ffffff}.gallery-screen:first-child img{width:49%;margin-left:auto;object-fit:contain;object-position:center}.gallery-screen:first-child:after{display:none}.gallery-screen:first-child .gallery-screen-copy{max-width:42%;color:#202024}.gallery-screen:first-child .gallery-number{color:#202024}.gallery-screen:first-child .gallery-screen-copy>b{border-color:#20202460}.motion-static .gallery-screen:first-child img{width:100%;object-fit:cover}.motion-static .gallery-screen:first-child .gallery-screen-copy{max-width:none;color:white}.motion-static .gallery-screen:first-child:after{display:block}.motion-static .gallery-screen:first-child .gallery-number{color:white}} @media(min-width:901px){.assembly-phone{left:72%}} /* Desktop refinement: transparent white surfaces, restrained scale and motion. */ @media(min-width:901px){ body.page-work,body.page-web-interactive{--paper:#fff;--ink:#25242a;background:#fff} .page-work .festival-hero h1,.page-work:lang(ru) .festival-hero h1,.page-web-interactive .creative-hero h1,.page-web-interactive:lang(ru) .creative-hero h1{font-size:clamp(46px,5.2vw,82px);font-weight:350;letter-spacing:-.045em;line-height:1.08;margin:22px 0 18px;gap:24px} .title-spark{font-size:.25em;color:#99c900}.wordmark span{margin-top:5px;letter-spacing:.3px} .page-work .festival-intro h2,.assembly-heading h2,.sequence-heading>h2,.festival-visuals h2,.formats-heading h2,.interface-heading h2,.mobile-heading h2{font-size:clamp(30px,3.1vw,48px);line-height:1.12;letter-spacing:-.035em} .page-web-interactive .case-intro h2{font-size:clamp(36px,4vw,60px)!important} .page-work .project-cta h2,.page-web-interactive .project-cta h2,.page-work:lang(ru) .project-cta h2,.page-web-interactive:lang(ru) .project-cta h2{font-size:clamp(40px,5vw,76px);line-height:1.12;letter-spacing:-.04em} .film-stack .display-word,.page-work:lang(ru) .film-stack .fashion-cut-copy .display-word,.page-work:lang(ru) .film-stack .macro-title .display-word,.page-work:lang(ru) .film-stack .character-heading .display-word{font-size:clamp(28px,3vw,44px);font-weight:350;letter-spacing:-.035em;line-height:1.12} .sequence-copy h3{font-size:clamp(26px,2.6vw,38px);line-height:1.16;letter-spacing:-.035em} .sequence-card,.sequence-card:nth-child(2),.sequence-card:nth-child(3),.film-stack .festival-film,.film-stack .macro-cut,.film-stack .character-cut{background:rgba(255,255,255,.91);backdrop-filter:blur(20px);border-color:#25242a15;border-radius:6px;box-shadow:0 -8px 36px #25242a07} .sequence-screen,.sequence-card:nth-child(2) .sequence-screen,.sequence-card:nth-child(3) .sequence-screen{transform:none;border-radius:3px;box-shadow:0 16px 35px #25242a10} .sequence-number:before{content:'';display:inline-block;width:6px;height:6px;margin-right:10px;background:#c8ff19;border-radius:50%} .gallery-screen{box-shadow:0 18px 40px #25242a12}.gallery-screen-copy strong{font-size:clamp(26px,2.7vw,40px)} .gallery-index span.is-active{border-color:#c8ff19}.assembly-progress>span{background:#c8ff19} .assembly-stage{background:#fff}.spatial-enabled .assembly-section{height:420svh}.spatial-enabled .spatial-gallery{height:380svh} .cards-motion .sequence-card+.sequence-card,.cards-motion .film-stack .festival-film+.festival-film{margin-top:65svh} .programme{background:#ffffffd9;backdrop-filter:blur(18px)} .mobile-exhibit,.interface-exhibit,.festival-visuals,.service-depth,.page-work .festival-formats{background:#fff} } @media(min-width:901px){.service-depth>h2{font-size:clamp(30px,3.2vw,48px);letter-spacing:-.03em}.service-depth h2.depth-subtitle{font-size:clamp(28px,2.8vw,40px)}} /* web-match.css */ /* 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} } /* web-concepts.css */ .site-concepts{background:#fff;color:#202024;padding:78px 0 85px;border-top:1px solid #20202428;overflow:hidden} .site-concepts-head{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;align-items:end;padding:0 var(--pad) 40px} .site-concepts-head>span{grid-column:1/-1;font-size:10px;letter-spacing:.12em} .site-concepts-head h2{font-size:clamp(39px,4vw,62px);line-height:1.03;letter-spacing:-.05em;font-weight:400;margin:15px 0 0} .site-concepts-head p{font-size:15px;line-height:1.6;max-width:47ch;margin:0 90px 0 0} .site-concepts-controls{position:absolute;right:var(--pad);bottom:40px;display:flex;gap:5px} .site-concepts-controls button{width:38px;height:38px;border:1px solid #20202450;background:#fff;color:#202024;font:20px Arial,sans-serif;cursor:pointer;transition:background .25s} .site-concepts-controls button:hover{background:#c9ff1b} .site-concepts-track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--pad) 10px} .site-concepts-track::-webkit-scrollbar{display:none} .site-concept-card{display:block;flex:0 0 clamp(380px,39vw,680px);scroll-snap-align:start;text-decoration:none;color:inherit} .site-concept-art{display:block;aspect-ratio:1.6;overflow:hidden;background:#f2f2f2} .site-concept-art img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s;filter:saturate(.82)} .site-concept-card:hover .site-concept-art img{transform:scale(1.04);filter:saturate(1)} .site-concept-meta{display:grid;grid-template-columns:1fr auto;gap:10px 25px;min-height:142px;padding:17px 2px 10px;border-top:1px solid #20202450} .site-concept-meta small{grid-column:1/-1;font-size:9px;letter-spacing:.08em} .site-concept-meta b{grid-column:1;font-size:clamp(23px,2.1vw,33px);font-weight:400;letter-spacing:-.04em} .site-concept-meta>span{grid-column:1;font-size:13px;line-height:1.5;max-width:43ch} .site-concept-meta em{grid-column:2;grid-row:2/4;align-self:start;font-style:normal;font-size:10px;border-bottom:1px solid #20202460;padding-bottom:6px;white-space:nowrap} .site-concept-card:focus-visible{outline:2px solid #202024;outline-offset:3px} @media(max-width:767px){.site-concepts{padding:55px 0 58px}.site-concepts-head{display:block;padding:0 20px 30px}.site-concepts-head>span{font-size:9px}.site-concepts-head h2{font-size:39px;margin:22px 0 17px}.site-concepts-head p{font-size:14px;line-height:1.55;margin:0;max-width:32ch}.site-concepts-controls{position:static;margin-top:22px}.site-concepts-track{gap:12px;padding:0 20px 8px}.site-concept-card{flex-basis:83vw}.site-concept-meta{min-height:150px}.site-concept-meta b{font-size:25px}.site-concept-meta>span{font-size:12px}.site-concept-meta em{font-size:9px}} @media(prefers-reduced-motion:reduce){.site-concept-art img,.site-concepts-controls button{transition:none}} /* process-motion.css */ /* A short, chapter-based process scene shared by the RU and EN web pages. */ .page-web-interactive .process-motion { position: relative; margin: 64px calc(-1 * var(--pad)) 64px; background: #fff; color: #202024; border-block: 1px solid #2020241c; isolation: isolate; } .page-web-interactive .process-motion *, .page-web-interactive .process-motion *::before, .page-web-interactive .process-motion *::after { box-sizing: border-box; } .page-web-interactive .process-motion__sticky { position: relative; min-height: 740px; overflow: hidden; background: #fff; } .page-web-interactive .process-motion__copy { position: relative; z-index: 3; width: min(48%, 660px); min-height: 740px; padding: clamp(58px, 9vh, 94px) 0 95px var(--pad); } .page-web-interactive .process-motion__copy .eyebrow { margin: 0 0 25px; font-size: 10px; line-height: 1.3; letter-spacing: .12em; } .page-web-interactive .process-motion h2, .page-web-interactive .service-depth .process-motion h2 { width: auto; margin: 0; font-size: clamp(54px, 5.9vw, 88px); line-height: .98; letter-spacing: -.07em; font-weight: 410; } .page-web-interactive .process-motion h2 span { background: linear-gradient(transparent 56%, #c9ff1b 56%, #c9ff1b 90%, transparent 90%); } .page-web-interactive .process-motion__steps { list-style: none; display: grid; gap: 0; padding: 0; margin: 52px 0 20px; } .page-web-interactive .process-motion__step { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid #20202428; } .page-web-interactive .process-motion__step > span { width: max-content; height: max-content; padding: 5px 6px; background: #c9ff1b; font-size: 10px; font-weight: 600; line-height: 1; } .page-web-interactive .process-motion__step h3 { margin: 0 0 11px; font-size: clamp(23px, 2.1vw, 33px); line-height: 1.1; font-weight: 430; letter-spacing: -.045em; } .page-web-interactive .process-motion__step p { max-width: 47ch; margin: 0; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.5; } .page-web-interactive .process-motion__nav, .page-web-interactive .process-motion__progress, .page-web-interactive .process-motion__progress-label { display: none; } .page-web-interactive .process-motion__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .page-web-interactive .process-motion__world { position: absolute; z-index: 1; inset: 2% 0 2% 50%; display: grid; place-items: center; pointer-events: none; } .page-web-interactive .process-motion__atmosphere { position: absolute; inset: -8% -7% -8% -22%; overflow: hidden; opacity: .6; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at 56% 50%, #000 24%, #000a 54%, transparent 78%); mask-image: radial-gradient(ellipse at 56% 50%, #000 24%, #000a 54%, transparent 78%); } .page-web-interactive .process-motion__atmosphere img { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(11px) saturate(1.08); transition: transform .65s ease, opacity .5s ease; } .page-web-interactive .process-motion__pink { opacity: 0; } .page-web-interactive .process-motion__orbit { position: relative; width: clamp(208px, 23vw, 300px); transform: rotate(-3deg); transition: transform .55s cubic-bezier(.2,.8,.2,1); pointer-events: auto; } .page-web-interactive .process-motion__frame { position: relative; z-index: 2; padding: 7px; background: #fff; border: 1px solid #2020242c; box-shadow: 0 24px 65px #32404a26, 0 8px 24px #d2538a17; } .page-web-interactive .process-motion__frame::before { content: ""; position: absolute; z-index: -1; inset: -11px; border: 1px solid #20202446; transform: rotate(5deg); pointer-events: none; } .page-web-interactive .process-motion__window { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: #c4eff2; } .page-web-interactive .process-motion__scene, .page-web-interactive .process-motion__window video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-web-interactive .process-motion__scene { opacity: 0; transition: opacity .42s ease, transform .7s ease; transform: scale(1.05) translateY(5px); pointer-events: none; } .page-web-interactive .process-motion__scene:first-child { opacity: 1; transform: scale(1); } html.has-process-motion .page-web-interactive .process-motion__scene:first-child { opacity: 0; transform: scale(1.05) translateY(5px); } html.has-process-motion .page-web-interactive .process-motion__scene.is-active, html.has-process-motion .page-web-interactive .process-motion__scene.is-active:first-child { opacity: 1; transform: scale(1); } .page-web-interactive .process-motion__window video { z-index: 4; opacity: 0; visibility: hidden; pointer-events: none; background: #111; } .page-web-interactive .process-motion__play, .page-web-interactive .process-motion__close { position: absolute; z-index: 5; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; } .page-web-interactive .process-motion__play { right: 12px; bottom: 12px; width: 48px; height: 48px; background: #c9ff1b; color: #17191b; box-shadow: 0 5px 20px #0003; transition: transform .25s ease; } .page-web-interactive .process-motion__play:hover { transform: scale(1.08); } .page-web-interactive .process-motion__play span { margin-left: 2px; font-size: 15px; } .page-web-interactive .process-motion__close { top: 10px; right: 10px; width: 38px; height: 38px; display: none; background: #17191be8; color: #fff; font-size: 29px; line-height: 1; } .page-web-interactive .process-motion__world.is-playing video { opacity: 1; visibility: visible; pointer-events: auto; } .page-web-interactive .process-motion__world.is-playing .process-motion__play, .page-web-interactive .process-motion__world.is-playing .process-motion__smile { opacity: 0 !important; pointer-events: none; } .page-web-interactive .process-motion__world.is-playing .process-motion__close { display: grid; } .page-web-interactive .process-motion__meta { display: flex; justify-content: space-between; gap: 10px; padding: 14px 2px 0; font-size: 9px; letter-spacing: .05em; white-space: nowrap; } .page-web-interactive .process-motion__smile { position: absolute; z-index: 3; width: 64px; height: 64px; object-fit: contain; pointer-events: none; opacity: 0; filter: drop-shadow(0 8px 9px #72552d47); transition: opacity .42s ease, transform .65s ease; } .page-web-interactive .process-motion__smile:nth-child(1) { left: 4px; top: 22%; transform: translate(0,0) rotate(-13deg) scale(.65); } .page-web-interactive .process-motion__smile:nth-child(2) { left: 10px; top: 48%; width: 52px; height: 52px; transform: translate(0,0) rotate(15deg) scale(.6); } .page-web-interactive .process-motion__smile:nth-child(3) { left: 16px; top: 70%; width: 42px; height: 42px; transform: translate(0,0) rotate(-16deg) scale(.6); } html.has-process-motion .page-web-interactive .process-motion { height: 230svh; } html.has-process-motion .page-web-interactive .process-motion__sticky { position: sticky; top: 0; height: 100svh; min-height: 0; } html.has-process-motion .page-web-interactive .process-motion__copy { height: 100%; min-height: 0; } html.has-process-motion .page-web-interactive .process-motion__steps { position: absolute; top: 45%; left: var(--pad); width: min(86%, 520px); height: 195px; margin: 0; } html.has-process-motion .page-web-interactive .process-motion__step { position: absolute; inset: 0; display: grid; align-content: start; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .42s ease, transform .42s ease, visibility .42s ease; border-color: transparent; pointer-events: none; } html.has-process-motion .page-web-interactive .process-motion__step.is-active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } html.has-process-motion .page-web-interactive .process-motion__nav { position: absolute; bottom: 13%; left: var(--pad); display: flex; gap: 6px; } .page-web-interactive .process-motion__nav button { width: 43px; height: 36px; padding: 0; border: 1px solid #20202440; background: #fff; color: #202024; cursor: pointer; font: inherit; font-size: 10px; transition: background .25s ease, border-color .25s ease; } .page-web-interactive .process-motion__nav button:hover, .page-web-interactive .process-motion__nav button[aria-current="step"] { border-color: #c9ff1b; background: #c9ff1b; } html.has-process-motion .page-web-interactive .process-motion__progress { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: 26px; display: block; height: 1px; background: #20202438; } .page-web-interactive .process-motion__progress span { display: block; width: 25%; height: 2px; background: #202024; transition: width .4s ease; } html.has-process-motion .page-web-interactive .process-motion__progress-label { position: absolute; bottom: 43px; left: var(--pad); display: block; font-size: 9px; letter-spacing: .08em; } .page-web-interactive .process-motion[data-stage="1"] .process-motion__pink { opacity: .3; } .page-web-interactive .process-motion[data-stage="2"] .process-motion__pink, .page-web-interactive .process-motion[data-stage="3"] .process-motion__pink { opacity: .85; } .page-web-interactive .process-motion[data-stage="1"] .process-motion__orbit { transform: rotate(-1deg) translateY(-6px); } .page-web-interactive .process-motion[data-stage="2"] .process-motion__orbit { transform: rotate(2deg) translateY(-12px); } .page-web-interactive .process-motion[data-stage="3"] .process-motion__orbit { transform: rotate(-2deg) translateY(-18px); } .page-web-interactive .process-motion[data-stage="1"] .process-motion__atmosphere img { transform: translate(18px, -12px) scale(1.08); } .page-web-interactive .process-motion[data-stage="2"] .process-motion__atmosphere img { transform: translate(-10px, 18px) scale(1.13); } .page-web-interactive .process-motion[data-stage="3"] .process-motion__atmosphere img { transform: translate(17px, -16px) scale(1.09); } .page-web-interactive .process-motion[data-stage="1"] .process-motion__smile, .page-web-interactive .process-motion[data-stage="2"] .process-motion__smile, .page-web-interactive .process-motion[data-stage="3"] .process-motion__smile { opacity: .9; } .page-web-interactive .process-motion[data-stage="1"] .process-motion__smile:nth-child(1) { transform: translate(-46px,-22px) rotate(-15deg) scale(.86); } .page-web-interactive .process-motion[data-stage="1"] .process-motion__smile:nth-child(2) { transform: translate(-38px,8px) rotate(12deg) scale(.74); } .page-web-interactive .process-motion[data-stage="1"] .process-motion__smile:nth-child(3) { transform: translate(-28px,19px) rotate(-14deg) scale(.72); } .page-web-interactive .process-motion[data-stage="2"] .process-motion__smile:nth-child(1) { transform: translate(-68px,-42px) rotate(-24deg) scale(1); } .page-web-interactive .process-motion[data-stage="2"] .process-motion__smile:nth-child(2) { transform: translate(-50px,14px) rotate(18deg) scale(.81); } .page-web-interactive .process-motion[data-stage="2"] .process-motion__smile:nth-child(3) { transform: translate(-37px,28px) rotate(-10deg) scale(.78); } .page-web-interactive .process-motion[data-stage="3"] .process-motion__smile:nth-child(1) { transform: translate(-77px,-54px) rotate(-16deg) scale(.94); } .page-web-interactive .process-motion[data-stage="3"] .process-motion__smile:nth-child(2) { transform: translate(-65px,25px) rotate(15deg) scale(.8); } .page-web-interactive .process-motion[data-stage="3"] .process-motion__smile:nth-child(3) { transform: translate(-47px,35px) rotate(-18deg) scale(.72); } @media(max-width:900px) { .page-web-interactive .process-motion__copy { width: 53%; } .page-web-interactive .process-motion__world { inset-inline-start: 53%; } .page-web-interactive .process-motion__orbit { width: clamp(180px, 25vw, 235px); } .page-web-interactive .process-motion h2, .page-web-interactive .service-depth .process-motion h2 { font-size: clamp(45px, 6vw, 66px); } } @media(max-width:700px) { .page-web-interactive .process-motion { margin-block: 50px; } .page-web-interactive .process-motion__sticky { min-height: 0; } .page-web-interactive .process-motion__copy { width: 100%; min-height: 0; padding: 38px var(--pad) 30px; } .page-web-interactive .process-motion__copy .eyebrow { margin-bottom: 15px; font-size: 9px; } .page-web-interactive .process-motion h2, .page-web-interactive .service-depth .process-motion h2 { font-size: clamp(43px, 11vw, 62px); } .page-web-interactive .process-motion__steps { margin-top: 32px; } .page-web-interactive .process-motion__step { grid-template-columns: 28px 1fr; gap: 12px; padding: 16px 0; } .page-web-interactive .process-motion__step h3 { font-size: 23px; } .page-web-interactive .process-motion__step p { font-size: 13px; line-height: 1.45; } .page-web-interactive .process-motion__world { position: relative; inset: auto; min-height: 350px; margin-top: 5px; } .page-web-interactive .process-motion__atmosphere { inset: -15% -15%; } .page-web-interactive .process-motion__orbit { width: min(43vw, 190px); } .page-web-interactive .process-motion__meta { font-size: 7px; } .page-web-interactive .process-motion__smile { width: 54px; height: 54px; } html.has-process-motion .page-web-interactive .process-motion { height: 215svh; } html.has-process-motion .page-web-interactive .process-motion__copy { position: static; height: 100%; padding: 4.5svh var(--pad) 0; } html.has-process-motion .page-web-interactive .process-motion__world { position: absolute; inset: 21% 0 36%; min-height: 0; margin: 0; } html.has-process-motion .page-web-interactive .process-motion__steps { top: 66%; left: var(--pad); width: calc(100% - 2 * var(--pad)); height: 22%; } html.has-process-motion .page-web-interactive .process-motion__step { padding: 0; } html.has-process-motion .page-web-interactive .process-motion__nav { bottom: 7.5%; left: var(--pad); } .page-web-interactive .process-motion__nav button { width: 38px; height: 33px; } html.has-process-motion .page-web-interactive .process-motion__progress { bottom: 17px; } html.has-process-motion .page-web-interactive .process-motion__progress-label { bottom: 32px; font-size: 8px; } } @media(max-width:700px) and (max-height:730px) { html.has-process-motion .page-web-interactive .process-motion__copy { padding-top: 20px; } .page-web-interactive .process-motion h2, .page-web-interactive .service-depth .process-motion h2 { font-size: clamp(39px, 10vw, 52px); } html.has-process-motion .page-web-interactive .process-motion__world { inset: 19% 0 38%; } html.has-process-motion .page-web-interactive .process-motion__steps { top: 64%; } .page-web-interactive .process-motion__orbit { width: min(36vw, 155px); } } @media(prefers-reduced-motion:reduce) { .page-web-interactive .process-motion *, .page-web-interactive .process-motion *::before { transition-duration: .01ms !important; } } /* miniapp-preview.css */ :root{--ma-ink:#25242a;--ma-line:#d7d7dc;--ma-lime:#c8ff19;--ma-muted:#66656c} [hidden]{display:none!important}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #6b8000;outline-offset:5px}.preview-ribbon{display:flex;justify-content:space-between;gap:15px;background:#25242a;color:#fff;padding:12px var(--pad);font-size:12px;line-height:1.5}.preview-ribbon a{text-decoration:underline;text-underline-offset:3px}.preview-jump{display:flex;gap:26px;flex-wrap:wrap;margin:22px var(--pad) 0;font-size:13px;border-bottom:1px solid #d7d7dc;padding-bottom:20px}.preview-jump a{padding:8px 0}.preview-jump a:last-child{border-bottom:3px solid var(--ma-lime)} .miniapp-service{margin:80px var(--pad) 130px;color:var(--ma-ink);scroll-margin-top:25px;font-size:16px}.ma-section-line{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--ma-ink);padding-top:18px;font-size:12px;letter-spacing:.06em}.ma-intro{display:grid;grid-template-columns:1.35fr 1fr;gap:7%;align-items:end;padding:55px 0 42px}.ma-kicker{font-size:12px;letter-spacing:.08em;line-height:1.6;text-transform:uppercase}.ma-intro h2{font-size:clamp(38px,5vw,84px);letter-spacing:-.06em;font-weight:400;line-height:1.06;margin-top:20px}.ma-intro h2 span{white-space:nowrap;background:linear-gradient(transparent 65%,var(--ma-lime) 65%,var(--ma-lime) 97%,transparent 97%)}.ma-intro-copy>p:first-child{font-size:18px;line-height:1.6;max-width:43ch}.ma-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:15px 24px;border:1px solid transparent;border-radius:0;font-size:14px;font-weight:500;text-align:center;line-height:1.4}.ma-button-dark{background:var(--ma-ink);color:white;margin-top:24px}.ma-button-dark:hover{background:#414047}.ma-button-lime{background:var(--ma-lime);color:var(--ma-ink)}.ma-small{font-size:13px;line-height:1.6;color:var(--ma-muted);margin-top:14px}.ma-scope-strip{display:grid;grid-template-columns:1fr 1fr 1fr;border-block:1px solid var(--ma-line);gap:24px;padding:23px 0;font-size:14px}.ma-scope-strip b{font-size:21px;font-weight:500;margin-right:8px}.ma-examples-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin:65px 0 25px}.ma-examples-heading h3{font-size:clamp(28px,3vw,46px);line-height:1.15;letter-spacing:-.04em}.ma-examples-heading p{font-size:13px;line-height:1.6;color:var(--ma-muted)}.ma-tabs{display:flex;gap:0;border-bottom:1px solid var(--ma-line)}.ma-tabs button{font-size:15px;background:transparent;border:0;border-bottom:3px solid transparent;padding:19px 24px;color:var(--ma-muted);text-align:left}.ma-tabs button[aria-selected=true]{color:var(--ma-ink);border-color:var(--ma-ink);background:#f3f3f5}.ma-tabs button:hover{color:var(--ma-ink)}.ma-panel{background:white;border:1px solid var(--ma-line);border-top:0;padding:34px 34px 0}.ma-demo-head{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:18px}.ma-demo-head h4{font-size:28px;line-height:1.2;font-weight:400;letter-spacing:-.04em;margin:10px 0 0}.ma-demo-head>p{max-width:45ch;font-size:14px;line-height:1.6;color:var(--ma-muted);margin:0}.ma-image-button{display:block;width:100%;border:0;padding:0;background:transparent;text-align:left}.ma-image-button img{display:block;width:100%;height:auto}.ma-demo-caption{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid var(--ma-line);padding:17px 0;font-size:13px;color:var(--ma-muted)}.ma-text-button{background:transparent;border:0;border-bottom:1px solid var(--ma-ink);padding:5px 0;color:var(--ma-ink);font-size:13px;min-height:36px}.ma-catalogs{display:grid;grid-template-columns:.8fr 1.35fr;gap:7%;align-items:center;margin-top:85px}.ma-catalog-copy h3,.ma-delivery h3{font-size:clamp(30px,3.3vw,52px);line-height:1.12;letter-spacing:-.05em;margin:20px 0 26px}.ma-catalog-copy>p:not(.ma-kicker){line-height:1.65;max-width:35ch}.ma-catalog-images{display:grid;grid-template-columns:1fr 1fr;gap:20px}.ma-catalog-images figure{margin:0;min-width:0}.ma-catalog-images figcaption{font-size:12px;line-height:1.5;margin-top:12px}.ma-delivery{display:grid;grid-template-columns:.8fr 1.35fr;gap:7%;border-top:1px solid var(--ma-line);margin-top:75px;padding-top:40px}.ma-scope-list article{display:flex;gap:22px;padding:20px 0;border-bottom:1px solid var(--ma-line)}.ma-scope-list article:first-child{padding-top:0}.ma-scope-list article>span{font-size:12px;padding-top:5px;color:var(--ma-muted)}.ma-scope-list h4{font-weight:400;font-size:21px;letter-spacing:-.02em;margin:0 0 10px}.ma-scope-list p{font-size:15px;line-height:1.65;max-width:50ch;color:var(--ma-muted)}.ma-separate{display:grid;grid-template-columns:.8fr 1.35fr;gap:7%;padding:25px 0;margin-top:15px;border-bottom:1px solid var(--ma-line)}.ma-separate>span{font-size:12px;letter-spacing:.04em;line-height:1.6}.ma-separate>p{font-size:15px;line-height:1.65;color:var(--ma-muted)}.ma-faq{margin:45px 0 60px;max-width:880px}.ma-faq details{border-bottom:1px solid var(--ma-line);padding:20px 0}.ma-faq summary{font-size:18px;cursor:pointer}.ma-faq details p{line-height:1.7;max-width:70ch;margin:18px 0 4px;font-size:15px;color:var(--ma-muted)}.ma-final-cta{background:var(--ma-ink);color:white;padding:45px;display:flex;justify-content:space-between;gap:30px;align-items:center}.ma-final-cta h3{font-size:clamp(29px,3.2vw,49px);line-height:1.16;letter-spacing:-.04em;margin-top:20px}.ma-final-cta .ma-button{flex-shrink:0}.ma-dialog{border:0;padding:0;background:white;color:var(--ma-ink);width:min(1100px,94vw);max-width:94vw;max-height:92vh;box-shadow:0 20px 80px #0005}.ma-dialog::backdrop{background:#16151bc9}.ma-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--ma-line);gap:20px;background:white;position:sticky;top:0;z-index:1}.ma-dialog-header h2{font-size:18px;line-height:1.4;margin:0;letter-spacing:-.02em}.ma-close{font-size:28px;line-height:1;background:transparent;border:0;min-width:44px;min-height:44px}.ma-dialog-image{display:block;width:100%;height:auto}.ma-image-note{font-size:12px;line-height:1.6;padding:16px 24px;color:var(--ma-muted)}.ma-brief-dialog{max-width:640px}.ma-form{padding:26px}.ma-form>p{font-size:14px;line-height:1.65;margin-bottom:24px;color:var(--ma-muted)}.ma-form label{display:block;font-size:14px;line-height:1.5;margin:18px 0 8px}.ma-form input,.ma-form select,.ma-form textarea{display:block;width:100%;border:1px solid #bbbcc1;padding:12px;color:var(--ma-ink);background:white;border-radius:0;min-height:48px;font-size:16px}.ma-form textarea{resize:vertical;min-height:90px}.ma-form .ma-button{margin-top:24px;width:100%}.ma-form [role=status]{padding:16px;background:#eef5d9;margin:18px 0 0;color:var(--ma-ink)}.preview-stage-note{margin:20px var(--pad);font-size:12px;color:#66656c;line-height:1.6}.process-motion{display:none}.site-concepts-controls button{min-width:44px;min-height:44px} @media(max-width:760px){.preview-ribbon{font-size:11px;flex-wrap:wrap;padding:10px 20px}.preview-jump{gap:16px;font-size:12px}.miniapp-service{margin-top:50px;margin-bottom:70px}.ma-section-line{font-size:10px;line-height:1.6;gap:16px}.ma-section-line>span:last-child{text-align:right}.ma-intro{grid-template-columns:1fr;padding:35px 0;gap:28px}.ma-intro h2{font-size:clamp(34px,8.8vw,56px);line-height:1.1;margin-top:15px;letter-spacing:-.055em}.ma-intro-copy>p:first-child{font-size:16px}.ma-button{width:100%;min-height:54px}.ma-scope-strip{grid-template-columns:1fr;gap:12px;font-size:14px;padding:20px 0}.ma-scope-strip span+span{border-top:1px solid #e4e4e8;padding-top:12px}.ma-examples-heading{display:block;margin-top:40px}.ma-examples-heading h3{font-size:28px}.ma-examples-heading p{margin-top:15px}.ma-tabs button{width:50%;padding:15px 10px;font-size:13px;line-height:1.5}.ma-panel{padding:20px 13px 0}.ma-demo-head{display:block;margin-bottom:14px}.ma-demo-head h4{font-size:24px}.ma-demo-head>p{font-size:13px;margin-top:14px;line-height:1.65}.ma-demo-caption{font-size:11px;align-items:start;gap:12px}.ma-demo-caption span{padding-top:8px}.ma-text-button{font-size:12px;line-height:1.5}.ma-catalogs{grid-template-columns:1fr;gap:30px;margin-top:45px}.ma-catalog-copy h3,.ma-delivery h3{font-size:34px;line-height:1.1;margin:15px 0 20px}.ma-catalog-copy h3 br{display:none}.ma-catalog-copy>p:not(.ma-kicker){font-size:15px;max-width:none}.ma-catalog-images{gap:10px}.ma-catalog-images figcaption{font-size:10px;letter-spacing:0}.ma-delivery{grid-template-columns:1fr;gap:15px;margin-top:45px;padding-top:30px}.ma-delivery h3 br{display:none}.ma-scope-list h4{font-size:19px}.ma-scope-list p{font-size:14px}.ma-separate{grid-template-columns:1fr;gap:13px}.ma-separate>p{font-size:14px}.ma-faq{margin:20px 0 35px}.ma-faq summary{font-size:16px;line-height:1.5}.ma-faq details p{font-size:14px}.ma-final-cta{display:block;padding:26px 22px}.ma-final-cta h3{font-size:29px;margin:18px 0 26px}.ma-kicker{font-size:10px}.ma-dialog-header{padding:12px 16px}.ma-dialog-header h2{font-size:15px}.ma-form{padding:20px}.ma-form>p{font-size:13px}.ma-image-note{font-size:11px;padding:14px 16px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}} /* The source site's floating navigation is placed in normal flow for the offline review. */ .page-web-interactive .site-header{position:relative!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;z-index:2}.page-web-interactive .site-header nav,.page-web-interactive .site-header .start-link,.page-web-interactive .site-header .page-languages{position:static!important;inset:auto!important;transform:none!important}.ma-form [role=status]:empty{padding:0;margin:0;background:transparent} @media(max-width:760px){.page-web-interactive .site-header{display:flex;flex-wrap:wrap;gap:16px;min-height:auto;padding-top:24px;padding-bottom:24px}.page-web-interactive .site-header nav{order:3;width:100%;justify-content:flex-start;gap:22px}.page-web-interactive .site-header .page-languages{margin-left:auto}.page-web-interactive .site-header .start-link{margin-left:auto}} /* web-cases.css */ /* Focused October revision: real work replaces empty editorial space. */ .page-web-interactive .preview-jump a:first-child{border-bottom:3px solid var(--ma-lime)} .page-web-interactive .preview-jump a:last-child{border-bottom:0} .page-web-interactive .miniapp-service{margin-bottom:72px} .web-cases{margin:0;padding:0 var(--pad) 52px;color:#25242a;scroll-margin-top:80px} .web-cases-heading{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;border-top:1px solid #25242a;padding:24px 0 28px} .web-cases .case-eyebrow{margin:0 0 16px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.6;color:#66656c} .web-cases-heading h2{font-size:clamp(32px,3.6vw,54px);font-weight:450;line-height:1.1;letter-spacing:-.05em;margin:0} .web-cases-heading>p{font-size:15px;line-height:1.65;max-width:45ch;margin:0 0 2px;justify-self:end} .folio-case{border:1px solid #d7d7d5;background:#f7f7f2;overflow:hidden} .folio-case-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;background:#25242a;color:#fff;font-size:11px;letter-spacing:.06em;line-height:1.6} .folio-case-top span:last-child{color:#cfdfa0;display:flex;align-items:center;gap:8px} .folio-case-top span:last-child:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#c8ff19} .folio-embed{display:block;width:100%;height:640px;border:0;background:#f6f5ee} .folio-case-caption{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:19px 22px;border-top:1px solid #d7d7d5;background:#fff} .folio-case-caption p{font-size:13px;line-height:1.65;max-width:72ch;margin:0;color:#66656c} .folio-case-caption .ma-text-button{flex-shrink:0;font-size:13px;line-height:1.5} .own-site-case{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:44px;align-items:center;margin-top:36px;padding:28px;background:#f5f5f3;border:1px solid #e4e4df} .own-site-visual{margin:0;min-width:0;background:white;border:1px solid #ddded8} .own-site-browser{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:10px 14px;font-size:10px;color:#777a71;border-bottom:1px solid #e4e4df} .own-site-browser i{font-style:normal;letter-spacing:2px;color:#bebeb6;font-size:9px} .own-site-visual button{display:block;width:100%;border:0;padding:0;background:white;position:relative} .own-site-visual img{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover} .own-site-visual .screen-zoom{position:absolute;right:12px;bottom:12px;border:1px solid #dbdcd6;background:#fffffff2;padding:8px 11px;font-size:10px;color:#25242a} .own-site-visual figcaption{padding:12px 14px;border-top:1px solid #e4e4df;font-size:10px;line-height:1.5;color:#76776e} .own-site-copy .case-eyebrow{margin-bottom:16px} .own-site-copy h3{font-size:clamp(26px,2.6vw,40px);line-height:1.13;letter-spacing:-.045em;font-weight:450;margin:0 0 19px} .own-site-copy>p{font-size:14px;line-height:1.65;margin:0;max-width:44ch;color:#555750} .own-site-copy ul{list-style:none;padding:0;margin:22px 0;display:flex;flex-wrap:wrap;gap:8px} .own-site-copy li{font-size:10px;line-height:1.5;padding:6px 9px;border:1px solid #d9dbd2;color:#555750} .own-site-copy>a{display:inline-flex;align-items:center;gap:15px;min-height:44px;color:#25242a;font-size:13px;border-bottom:1px solid #25242a} .web-cases :focus-visible{outline:3px solid #6b8000;outline-offset:4px} @media(min-width:768px) and (max-width:1100px){.folio-embed{height:680px}.own-site-case{gap:28px;padding:22px}.own-site-copy h3{font-size:30px}} @media(max-width:767px){ .page-web-interactive .miniapp-service{margin-bottom:48px} .web-cases{padding:0 20px 34px;scroll-margin-top:18px} .web-cases-heading{display:block;padding:20px 0 24px} .web-cases-heading h2{font-size:34px;max-width:12ch} .web-cases-heading>p{font-size:14px;margin-top:18px;max-width:38ch} .web-cases .case-eyebrow{font-size:10px;margin-bottom:14px} .folio-case-top{padding:12px 14px;font-size:9px;align-items:start;gap:8px} .folio-case-top span:last-child{max-width:110px;justify-content:end;text-align:right;font-size:8px} .folio-embed{height:1050px} .folio-case-caption{display:block;padding:16px} .folio-case-caption p{font-size:12px} .folio-case-caption .ma-text-button{margin-top:14px;min-height:44px} .own-site-case{grid-template-columns:1fr;gap:23px;margin-top:24px;padding:15px} .own-site-copy h3{font-size:29px;margin-bottom:15px} .own-site-copy>p{font-size:13px} .own-site-copy ul{margin:17px 0 10px;gap:6px} .own-site-copy li{font-size:9px;padding:5px 8px} .own-site-copy>a{font-size:12px} .own-site-visual figcaption{font-size:9px} } @media(prefers-reduced-motion:reduce){.web-cases *{scroll-behavior:auto!important;transition:none!important;animation:none!important}} /* service-order.css */ /* User-reviewed sequence: websites, concepts, then Mini Apps. */ .ma-examples-disclosure{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:27px 0;border-bottom:1px solid var(--ma-line)} .ma-examples-disclosure h3{font-size:clamp(26px,2.3vw,36px);line-height:1.15;letter-spacing:-.04em;font-weight:450;margin:12px 0} .ma-examples-disclosure>div>p:last-child{font-size:14px;line-height:1.6;color:var(--ma-muted);margin:0} .ma-examples-disclosure .ma-button{gap:20px;flex-shrink:0;margin-top:0;min-height:52px} .ma-examples-disclosure [data-disclosure-icon]{font-size:21px;line-height:1} .ma-examples-content[hidden]{display:none!important} .ma-examples-content>.ma-examples-heading{margin-top:32px} .ma-examples-content{padding-top:1px} .page-web-interactive #miniapps{margin-top:60px;margin-bottom:64px} @media(max-width:760px){.ma-examples-disclosure{display:block;padding:24px 0}.ma-examples-disclosure .ma-button{margin-top:22px;justify-content:space-between}.ma-examples-disclosure h3{font-size:28px}.ma-examples-disclosure>div>p:last-child{font-size:13px}.page-web-interactive #miniapps{margin-top:42px;margin-bottom:44px}} /* compact-service.css */ /* Compact service page. Neutral surfaces, clear controls, restrained glass. */ .page-web-interactive{background:#fff;color:#17191c} .page-web-interactive .preview-jump{margin-top:12px;padding-bottom:12px;gap:24px} .page-web-interactive .preview-jump a{font-size:12px;min-height:36px} .page-web-interactive .preview-jump a:first-child{border-bottom:2px solid #17191c} .page-web-interactive .creative-hero.web-intro{height:540px;min-height:540px;max-height:580px;padding-top:44px;padding-bottom:28px} .page-web-interactive .web-intro h1{margin:24px 0!important;font-size:clamp(48px,4.7vw,70px)!important} .page-web-interactive .web-intro .hero-summary{width:43%;max-width:430px} .page-web-interactive .web-intro .hero-summary p{font-size:16px;max-width:34ch} .page-web-interactive .web-intro .assembly-stage{background:radial-gradient(ellipse at 65% 50%,#f3f5f7 0,#fff 64%)} .page-web-interactive .assembly-laptop{top:29%} .page-web-interactive .assembly-phone{top:35%} .hero-controls{margin-top:25px;display:grid;gap:10px} .hero-primary{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:280px;min-height:46px;background:#181a1e;color:#fff;padding:12px 16px;border-radius:11px;font-size:13px;font-weight:500} .hero-primary span{color:#c8ff19;font-size:18px} .hero-controls>div{display:flex;flex-wrap:wrap;gap:8px} .hero-controls button{display:inline-flex;align-items:center;gap:16px;min-height:40px;padding:9px 12px;border:1px solid #e0e2e6;border-radius:10px;background:linear-gradient(160deg,#fff,#f6f7f9);color:#42454c;font-size:11px;box-shadow:inset 0 1px #fff} .hero-controls button:hover{background:#eef0f3;border-color:#bbbfc6} .page-web-interactive .site-concepts{padding:38px 0 42px;border-top:1px solid #e4e6ea} .page-web-interactive .site-concepts-head{padding-bottom:23px;align-items:end;gap:8px 32px} .page-web-interactive .site-concepts-head h2{font-size:clamp(30px,3.2vw,45px);margin-top:10px} .page-web-interactive .site-concepts-head p{font-size:13px;max-width:42ch} .page-web-interactive .site-concepts-controls{bottom:23px} .page-web-interactive .site-concepts-controls button{border-radius:10px;border-color:#dce0e5;font-size:17px} .page-web-interactive .site-concept-card{flex-basis:clamp(280px,30vw,470px)} .page-web-interactive .site-concept-art{border-radius:12px;aspect-ratio:1.7} .page-web-interactive .site-concept-meta{min-height:104px;gap:7px 14px;padding-top:13px;border-top:0} .page-web-interactive .site-concept-meta b{font-size:clamp(21px,1.8vw,27px)} .page-web-interactive .site-concept-meta>span{font-size:12px;max-width:32ch} .page-web-interactive .site-concept-meta em{font-size:9px} .page-web-interactive .web-cases{padding:40px var(--pad) 42px;border-top:1px solid #e4e6ea;scroll-margin-top:18px} .page-web-interactive .web-cases-heading{border:0;padding:0 0 22px;grid-template-columns:1fr 1fr;gap:25px;max-width:1080px;margin:auto} .page-web-interactive .web-cases-heading .case-eyebrow{font-size:10px;margin-bottom:12px;color:#767c85} .page-web-interactive .web-cases-heading h2{font-size:clamp(30px,3.2vw,43px);line-height:1.1;letter-spacing:-.055em} .page-web-interactive .web-cases-heading>p{font-size:13px;line-height:1.6;max-width:37ch;color:#676d76} .page-web-interactive .folio-case{max-width:1080px;margin:auto;border:1px solid #dfe3e9;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#f8fafc,#eef1f5);box-shadow:0 16px 36px #11182706,inset 0 1px #fff} .page-web-interactive .folio-case-top{padding:11px 17px;background:#ffffff91;color:#626973;border-bottom:1px solid #ffffffd9;backdrop-filter:blur(14px);font-size:9px;letter-spacing:.06em} .page-web-interactive .folio-case-top span:last-child{color:#51575f;font-size:8px} .page-web-interactive .folio-case-top span:last-child:before{background:#c8ff19;width:5px;height:5px} .page-web-interactive .folio-embed{height:430px;background:transparent} .page-web-interactive .folio-case-caption{padding:11px 17px;background:#ffffffb0;border-top:1px solid #fff;gap:20px} .page-web-interactive .folio-case-caption p{font-size:11px;line-height:1.5;color:#7a8089} .page-web-interactive .folio-case-caption .ma-text-button{font-size:11px;min-height:32px;border:0} .page-web-interactive .compact-miniapps{margin:0;padding:38px var(--pad) 36px;border-top:1px solid #e4e6ea} .compact-ma-head{max-width:1080px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end} .compact-ma-head .ma-kicker{font-size:10px;margin:0 0 12px;color:#747a83} .compact-ma-head h2{font-size:clamp(30px,3.2vw,43px);font-weight:450;letter-spacing:-.055em;line-height:1.1;margin:0} .compact-ma-head>div:last-child{justify-self:end;max-width:38ch} .compact-ma-head>div>p:not(.ma-kicker){font-size:13px;line-height:1.6;color:#646b75;margin:0} .compact-ma-head .ma-button{font-size:11px;padding:11px 15px;min-height:42px;margin-top:16px;border-radius:10px} .compact-ma-previews{max-width:1080px;margin:24px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:20px} .compact-ma-card{background:#f6f7f9;border:1px solid #e5e7eb;border-radius:15px;overflow:hidden;min-width:0} .compact-ma-card>.ma-image-button{padding:12px;background:#f6f7f9} .compact-ma-card>.ma-image-button img{width:100%;height:auto;aspect-ratio:1.8;object-fit:cover;border-radius:8px} .compact-ma-card>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 16px 12px} .compact-ma-card h3{font-size:15px;line-height:1.4;font-weight:500;margin:0;letter-spacing:-.02em} .compact-ma-card .ma-text-button{font-size:10px;min-height:32px;border:0;white-space:nowrap} .compact-ma-bottom{max-width:1080px;margin:17px auto 0;display:flex;justify-content:space-between;align-items:center;gap:25px} .compact-ma-bottom>p{font-size:10px;line-height:1.6;color:#80868e;max-width:58ch;margin:0} .catalog-toggle{display:inline-flex;justify-content:space-between;align-items:center;gap:28px;min-height:42px;padding:10px 13px;border:1px solid #dce0e6;border-radius:10px;background:#fff;color:#363b43;font-size:11px;flex-shrink:0} .catalog-toggle:hover{background:#f4f6f8} .catalog-toggle [data-disclosure-icon]{font-size:17px;line-height:1} .compact-catalogs{max-width:840px;margin:24px auto 0;padding-top:22px;border-top:1px solid #e4e7eb} .compact-catalogs .ma-catalog-images{grid-template-columns:1fr 1fr;gap:22px} .compact-catalogs figure{margin:0} .compact-catalogs figcaption{font-size:11px;color:#737a84;margin-top:10px} .service-more{margin:0 var(--pad);border-block:1px solid #e4e7eb} .service-more>summary{display:flex;justify-content:space-between;align-items:center;gap:18px;list-style:none;min-height:64px;font-size:14px;cursor:pointer;color:#444b54} .service-more>summary::-webkit-details-marker{display:none} .service-more>summary>span{font-size:22px;font-weight:300;transition:transform .2s} .service-more[open]>summary>span{transform:rotate(45deg)} .page-web-interactive .service-more .section-block{padding:24px 0 30px} .page-web-interactive .service-more .service-depth{padding:28px 0;background:white} .page-web-interactive .service-more .section-rule{position:static} .page-web-interactive .service-more .section-rule h2,.page-web-interactive .service-more .service-depth>h2{font-size:30px} .page-web-interactive .project-cta{padding:45px var(--pad);margin-top:38px;background:#17191d} .page-web-interactive .project-cta h2,.page-web-interactive:lang(ru) .project-cta h2{font-size:clamp(34px,4vw,56px);line-height:1.1;margin:16px 0;letter-spacing:-.05em} .page-web-interactive .project-cta .eyebrow{font-size:9px;color:#a6adb7} .page-web-interactive .project-cta>p:last-child{font-size:12px;color:#b8bec6} .page-web-interactive .site-footer{padding-top:24px;padding-bottom:24px;font-size:10px;background:#17191d} .hero-demo-dialog{width:min(920px,94vw);border:1px solid #ffffff9c;border-radius:18px;background:#fafbfd;box-shadow:0 25px 90px #0d17264d} .hero-demo-dialog .ma-dialog-header{background:#ffffffd9;backdrop-filter:blur(15px);padding:15px 21px;border-color:#e8ebef} .hero-demo-dialog .ma-dialog-header h2{font-size:18px;letter-spacing:-.025em} .hero-demo-body{padding:22px} .hero-demo-body>p{max-width:60ch;margin:0 0 20px;color:#707783;font-size:13px;line-height:1.65} .hero-demo-dialog .interface-board{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:transparent;border:0;margin:0} .hero-demo-dialog .ui-sample{min-height:145px;border:1px solid #e0e5eb;background:#ffffffb8;border-radius:12px;padding:20px;box-shadow:inset 0 1px white} .hero-demo-dialog .sample-label{font-size:9px;color:#818894} .hero-demo-dialog .demo-nav{gap:5px;margin-top:25px;flex-wrap:wrap} .hero-demo-dialog .demo-nav a{font-size:9px;padding:10px;border:1px solid #d6dde6;border-radius:8px;background:white;color:#303741} .hero-demo-dialog .glass-demo{margin-top:25px;padding:13px 17px;font-size:11px;border-radius:9px;background:#191c21;color:white} .hero-demo-dialog .glass-demo i{background:#c8ff19} .hero-demo-dialog .sample-type strong{font-size:42px;margin-top:15px} .hero-demo-dialog .sample-type p,.hero-demo-dialog .sample-colors p{font-size:11px} .hero-demo-dialog .swatches{margin:23px 0 18px} .hero-demo-dialog .swatches span{width:37px;height:37px} .hero-demo-dialog .phones{display:flex;justify-content:center;align-items:start;gap:20px;padding:4px 0 15px;max-width:760px;margin:auto} .hero-demo-dialog .phone-presentation,.hero-demo-dialog .phone-presentation:nth-child(2),.hero-demo-dialog .phone-presentation:nth-child(3){width:29%;max-width:190px;transform:none!important;margin:0;min-width:0} .hero-demo-dialog .phone-frame{padding:5px;border-radius:22px;box-shadow:0 10px 28px #252e4010;border:1px solid #cbd1db;background:#fafafa} .hero-demo-dialog .phone-frame img{border-radius:16px} .hero-demo-dialog .phone-presentation figcaption{font-size:9px} .hero-demo-dialog .brief-phone-preview{min-height:360px;padding:17px 11px;border-radius:17px} .hero-demo-dialog .brief-phone-preview h3{font-size:18px} .hero-demo-dialog .brief-phone-preview p{font-size:8px} @media(max-width:1050px) and (min-width:768px){.page-web-interactive .creative-hero.web-intro{height:560px;min-height:560px;padding-top:45px}.page-web-interactive .web-intro .hero-summary{width:44%;max-width:390px}.hero-controls button{font-size:10px;padding:9px}.page-web-interactive .web-intro .hero-summary p{font-size:14px}.page-web-interactive .assembly-laptop{top:35%}.page-web-interactive .assembly-phone{top:42%}} @media(max-width:767px){ .page-web-interactive .creative-hero.web-intro{height:auto;min-height:0;max-height:none;padding:30px 20px 34px} .page-web-interactive .web-intro .assembly-section{display:none!important} .page-web-interactive .web-intro h1{font-size:54px!important;margin:0 0 18px!important} .page-web-interactive .web-intro .hero-summary{display:block;width:100%;max-width:none} .page-web-interactive .web-intro .hero-summary p{font-size:14px;max-width:34ch} .hero-controls{margin-top:21px;gap:9px}.hero-primary{max-width:none;width:100%;min-height:46px}.hero-controls>div{display:grid;grid-template-columns:1fr 1fr}.hero-controls button{justify-content:space-between;gap:8px;min-height:42px} .page-web-interactive .site-concepts{padding:30px 0 32px}.page-web-interactive .site-concepts-head{padding-bottom:20px}.page-web-interactive .site-concepts-head h2{font-size:32px;margin:12px 0}.page-web-interactive .site-concepts-head p{font-size:12px;max-width:33ch}.page-web-interactive .site-concepts-controls{margin-top:15px}.page-web-interactive .site-concept-card{flex-basis:81vw}.page-web-interactive .site-concept-meta b{font-size:23px}.page-web-interactive .site-concept-meta>span{font-size:11px}.page-web-interactive .site-concept-meta{min-height:98px}.page-web-interactive .site-concept-meta em{font-size:8px} .page-web-interactive .web-cases{padding:31px 20px 32px}.page-web-interactive .web-cases-heading{display:block;padding-bottom:18px}.page-web-interactive .web-cases-heading h2{font-size:32px;max-width:none}.page-web-interactive .web-cases-heading>p{margin-top:13px;font-size:12px;max-width:37ch}.page-web-interactive .folio-case{border-radius:16px}.page-web-interactive .folio-case-top{padding:10px 13px;font-size:8px}.page-web-interactive .folio-case-top span:last-child{font-size:7px}.page-web-interactive .folio-embed{height:670px}.page-web-interactive .folio-case-caption{display:flex;padding:9px 13px;gap:12px}.page-web-interactive .folio-case-caption p{font-size:9px;max-width:17ch}.page-web-interactive .folio-case-caption .ma-text-button{font-size:10px;margin:0;white-space:nowrap} .page-web-interactive .compact-miniapps{padding:31px 20px 30px}.compact-ma-head{display:block}.compact-ma-head h2{font-size:32px}.compact-ma-head>div:last-child{max-width:none;margin-top:15px}.compact-ma-head>div>p:not(.ma-kicker){font-size:12px;max-width:37ch}.compact-ma-head .ma-button{width:auto;min-height:42px;margin-top:16px;font-size:11px}.compact-ma-previews{gap:12px;margin-top:22px;grid-template-columns:1fr}.compact-ma-card>.ma-image-button{padding:10px}.compact-ma-card>.ma-image-button img{aspect-ratio:1.85}.compact-ma-card>div{padding:0 13px 9px}.compact-ma-card h3{font-size:14px}.compact-ma-card .ma-text-button{font-size:10px}.compact-ma-bottom{display:block;margin-top:14px}.compact-ma-bottom>p{font-size:10px;max-width:37ch}.catalog-toggle{margin-top:14px;width:100%;min-height:42px}.compact-catalogs{padding-top:17px;margin-top:20px}.compact-catalogs .ma-catalog-images{gap:12px}.compact-catalogs figcaption{font-size:9px} .service-more{margin:0 20px}.service-more>summary{min-height:59px;font-size:12px}.page-web-interactive .service-more .section-block{display:block;padding:20px 0}.page-web-interactive .service-more .section-rule h2,.page-web-interactive .service-more .service-depth>h2{font-size:26px}.page-web-interactive .service-more .section-block .service-rows{margin-top:24px}.page-web-interactive .service-more .service-depth{padding:20px 0}.page-web-interactive .project-cta{padding:32px 20px;margin-top:27px}.page-web-interactive .project-cta h2,.page-web-interactive:lang(ru) .project-cta h2{font-size:38px} .hero-demo-body{padding:17px}.hero-demo-dialog .ma-dialog-header{padding:11px 17px}.hero-demo-dialog .ma-dialog-header h2{font-size:16px}.hero-demo-body>p{font-size:12px}.hero-demo-dialog .interface-board{grid-template-columns:1fr;gap:10px}.hero-demo-dialog .ui-sample{min-height:130px;padding:18px}.hero-demo-dialog .phones{gap:12px;flex-wrap:wrap;justify-content:center}.hero-demo-dialog .phone-presentation,.hero-demo-dialog .phone-presentation:nth-child(2),.hero-demo-dialog .phone-presentation:nth-child(3){width:calc(50% - 6px);max-width:190px}.hero-demo-dialog .phone-presentation:nth-child(3){display:none}.hero-demo-dialog .phone-frame{border-radius:18px;padding:4px}.hero-demo-dialog .phone-frame img{border-radius:13px} } @media(prefers-reduced-motion:reduce){.hero-controls *, .catalog-toggle, .service-more>summary>span{transition:none!important}.compact-service *{scroll-behavior:auto!important}} /* v7-polish.css */ /* Readability and discoverability corrections from the user's Chrome review. */ .page-web-interactive .hero-primary{background:#d4ff32;color:#17200f;box-shadow:0 5px 15px #a0c32314} .page-web-interactive .hero-primary span{color:#17200f} .page-web-interactive .hero-primary:hover{background:#c9f421} .page-web-interactive .web-cases{background:#f1f5fa;border-top-color:#d6e0ec} .page-web-interactive .folio-case{background:linear-gradient(135deg,#e4edf7,#d9e4f2);border-color:#b9cadd;box-shadow:0 12px 30px #4768860c,inset 0 1px white} .page-web-interactive .folio-case-top{background:#ffffff75;border-bottom-color:#fafdff;color:#667b94} .page-web-interactive .folio-case-caption{background:#ffffffa6;border-top-color:#edf5ff} .page-web-interactive .project-cta{background:#d4ff32;color:#171d13;margin-top:30px} .page-web-interactive .project-cta h2,.page-web-interactive .project-cta h2 a{color:#171d13} .page-web-interactive .project-cta .eyebrow,.page-web-interactive .project-cta>p:last-child{color:#48503d} .page-web-interactive .site-footer{background:#d4ff32;color:#171d13;border-color:#9dbb3466} .page-web-interactive .site-footer a,.page-web-interactive .site-footer p{color:#28321c} .service-discovery{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:0 var(--pad);padding:24px 0 15px;border-top:1px solid #e4e7eb} .service-discovery h2{margin:0 0 8px;font-size:20px;line-height:1.25;font-weight:500;letter-spacing:-.025em} .service-discovery p{margin:0;font-size:12px;line-height:1.6;color:#727d8b} .service-discovery nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} .service-discovery a{display:inline-flex;align-items:center;min-height:38px;padding:9px 12px;border:1px solid #dce3eb;border-radius:9px;font-size:11px;color:#566779;background:#fff} .service-discovery a:hover{background:#f0f4f8} .page-web-interactive .service-more{border-top:0} .service-more>summary{min-height:46px;font-size:11px;color:#8b97a6} .page-web-interactive .service-more .service-row{grid-template-columns:minmax(160px,.8fr) minmax(160px,1.2fr)} .page-web-interactive .service-more .service-row .row-meta{grid-column:1/-1} .restored-process{margin:34px 0;padding:24px 0;border-block:1px solid #dbe2eb;scroll-margin-top:25px} .restored-process>h3{font-size:27px;font-weight:450;letter-spacing:-.03em;margin:0 0 22px} .restored-process ol{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:22px 35px;padding:0;margin:0} .restored-process li h4{font-size:17px;font-weight:500;margin:0 0 8px} .restored-process li p{font-size:13px;line-height:1.65;color:#6b7787;margin:0} #service-faq{scroll-margin-top:25px} @media(max-width:767px){ .service-discovery{display:block;margin:0 20px;padding:22px 0 8px} .service-discovery h2{font-size:18px}.service-discovery p{font-size:11px} .service-discovery nav{margin-top:14px;justify-content:flex-start;gap:7px}.service-discovery a{font-size:10px;padding:8px 10px;min-height:36px} .restored-process ol{grid-template-columns:1fr;gap:22px}.restored-process>h3{font-size:24px} .page-web-interactive .service-more .service-row{grid-template-columns:1fr}.page-web-interactive .service-more .service-row p,.page-web-interactive .service-more .service-row .row-meta{grid-column:1} } /* Keep the complete screenshot inside each bounded device screen. */ .page-web-interactive .web-intro .screen-slice img,.page-web-interactive .web-intro .assembly-phone img{object-fit:contain;object-position:center} /* v7-layout.css */ /* Load after compact-service.css. Geometry-only repair for the offline preview. No markup or asset changes. */ @media (min-width: 768px) { /* Let the copy determine the height if it needs more than the compact hero. The media stage is inset on every side, rather than cropped at the seam. */ .page-web-interactive .creative-hero.web-intro { height: auto; min-height: 540px; max-height: none; } .page-web-interactive .web-intro .assembly-section { inset: 28px var(--pad) 28px 43%; width: auto; height: auto !important; min-width: 0; margin: 0; } .page-web-interactive .web-intro .assembly-stage { position: relative !important; inset: auto; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; padding: 0; overflow: visible; } /* One bounded, proportional composition. At the maximum 860px width its height is 477.78px, inside the smallest 484px-tall desktop stage. The devices use small 2D angles, with no perspective/Z projection. */ .page-web-interactive .web-intro .assembly-world { position: relative; inset: auto; width: min(100%, 860px); height: auto; min-width: 0; aspect-ratio: 1.8; perspective: none; transform: none; transform-style: flat; } .page-web-interactive .web-intro .assembly-laptop { left: 4%; top: 6%; right: auto; bottom: auto; width: 68%; height: auto; aspect-ratio: 1.45; transform: rotate(-2deg); transform-origin: 50% 50%; transform-style: flat; will-change: auto; } .page-web-interactive .web-intro .laptop-screen { width: 100%; height: auto; aspect-ratio: 1.6; border-width: clamp(4px, .5vw, 8px); transform: none; transform-style: flat; box-shadow: 0 2px 0 2px #96969c, 0 12px 24px #25242a18; } /* The deck and front now occupy the reserved bottom 9.375% of the laptop, rather than extending beyond a parent sized only by the screen. */ .page-web-interactive .web-intro .laptop-deck { top: 90.625%; bottom: auto; left: -3%; width: 106%; height: 9.375%; transform: none; clip-path: polygon(3% 0, 97% 0, 100% 80%, 100% 100%, 0 100%, 0 80%); box-shadow: none; } .page-web-interactive .web-intro .deck-keys { top: 8%; height: 48%; } .page-web-interactive .web-intro .deck-trackpad { bottom: 8%; height: 27%; } .page-web-interactive .web-intro .laptop-front { top: auto; bottom: 0; left: -3%; width: 106%; height: 1.6%; transform: none; box-shadow: 0 12px 18px #22222218; } .page-web-interactive .web-intro .assembly-phone { left: 78%; top: 21%; right: auto; bottom: auto; width: 18%; height: auto; aspect-ratio: 390 / 844; border-width: clamp(4px, .35vw, 6px); transform: rotate(3deg); transform-origin: 50% 50%; transform-style: flat; will-change: auto; box-shadow: 2px 0 0 2px #a5a5ad, 8px 14px 22px #25242a18; } } @media (min-width: 768px) and (max-width: 1050px) { .page-web-interactive .creative-hero.web-intro { min-height: 560px; } /* Keep the entire media composition to the right of the wider tablet copy. */ .page-web-interactive .web-intro .assembly-section { left: 46%; } } /* Real rail padding defines its scrollable extent. Matching snap padding prevents mandatory snapping from scrolling away the first-card inset. */ .page-web-interactive .site-concepts { --v7-gallery-gutter: var(--pad); } .page-web-interactive .site-concepts-track { width: 100%; min-width: 0; margin-inline: 0; padding-inline: var(--v7-gallery-gutter); scroll-padding-inline: var(--v7-gallery-gutter); overflow-x: auto; justify-content: flex-start; } .page-web-interactive .site-concept-card:last-child { scroll-snap-align: end; } @media (max-width: 767px) { /* Match the existing 20px mobile hero and heading gutter exactly. All mobile hero behavior, including its hidden devices, is unchanged. */ .page-web-interactive .site-concepts { --v7-gallery-gutter: 20px; } } /* v8-colors.css */ /* The live site uses #c8ff19 as a small lime accent and light glass surfaces. This subdued lemon is an adaptation for a large CTA surface, not a claim that the live site already has a yellow full-width footer. */ .page-web-interactive .hero-primary{background:#e7e68f;color:#252821;border-color:#d0d078;box-shadow:0 4px 12px #9d9c3c0a} .page-web-interactive .hero-primary span{color:#252821} .page-web-interactive .hero-primary:hover{background:#dfdf82} .page-web-interactive .web-cases{background:#f7f2f6;border-top-color:#e8dce5} .page-web-interactive .folio-case{background:linear-gradient(135deg,#f0e3ec,#e9dce8);border-color:#d4bfce;box-shadow:0 12px 30px #825e770a,inset 0 1px white} .page-web-interactive .folio-case-top{background:#ffffff75;border-bottom-color:#fff9fd;color:#857180} .page-web-interactive .folio-case-caption{background:#ffffffa6;border-top-color:#fff7fc} .page-web-interactive .project-cta{width:100%;max-width:none;margin-inline:0;margin-top:30px;height:auto;min-height:0;padding:48px var(--pad);border:0;background:#e7e68f;color:#202622} .page-web-interactive .project-cta h2,.page-web-interactive:lang(ru) .project-cta h2{width:100%;max-width:none;font-size:clamp(48px,8.4vw,156px);line-height:1.04;margin:20px 0;letter-spacing:-.045em} .page-web-interactive .project-cta h2 a{display:block;width:100%;color:#202622} .page-web-interactive .project-cta .eyebrow,.page-web-interactive .project-cta>p:last-child{color:#44473d} .page-web-interactive .site-footer{width:100%;max-width:none;margin-inline:0;background:#e7e68f;color:#202622;border-color:#b9b97499} .page-web-interactive .site-footer a,.page-web-interactive .site-footer p{color:#33392e} @media(max-width:767px){.page-web-interactive .project-cta{padding:34px 20px;margin-top:27px}.page-web-interactive .project-cta h2,.page-web-interactive:lang(ru) .project-cta h2{font-size:clamp(40px,10.3vw,68px);margin:17px 0;line-height:1.06}} /* v8-hero.css */ /* Load last, after v7-layout.css. CSS-only three-quarter laptop: the screen asset/markup and phone are intact. Only desktop/tablet hero geometry is changed. The existing 860 x 477.78px maximum world and inset stage still bound the composition. Laptop width L; reserved height L / 1.15; screen height L / 1.6. The hinge is therefore at 71.875% of the reserved height. Deck depth is .27L (31.05% of reserved height), projected at 52 degrees. The front lip shares that hinge/plane and turns back to face the viewer. See ../web-revision-private/check-v8-geometry.py for transformed-corner math. */ @media (min-width: 768px) { .page-web-interactive .web-intro .assembly-laptop { left: 7.5%; top: 6%; width: 59%; height: auto; aspect-ratio: 1.15; transform: perspective(2400px) rotateX(-4deg) rotateY(-23deg) rotateZ(-2deg); transform-origin: 50% 50%; transform-style: preserve-3d; } .page-web-interactive .web-intro .laptop-deck, .page-web-interactive .web-intro .laptop-front { top: 71.875%; bottom: auto; left: -3%; width: 106%; height: 31.05%; transform: rotateX(52deg); transform-origin: 50% 0; } .page-web-interactive .web-intro .laptop-deck { clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); border-radius: 0 0 12px 12px; } /* Five responsive rows and sixteen columns, rather than the old fixed 21px row pitch inside a 17px-high strip. Original key colors are retained. */ .page-web-interactive .web-intro .deck-keys { top: 9%; height: 49%; background: repeating-linear-gradient(0deg, transparent 0 16%, #babac0 17% 20%), repeating-linear-gradient(90deg, #484851 0 4.75%, #bebec4 5% 6.25%); } .page-web-interactive .web-intro .deck-trackpad { bottom: 9%; height: 27%; } .page-web-interactive .web-intro .laptop-front { border-radius: 0; background: none; box-shadow: none; transform-style: preserve-3d; } .page-web-interactive .web-intro .laptop-front::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 3%; border-radius: 0 0 5px 5px; background: #bcbcc4; transform: rotateX(-52deg); transform-origin: 50% 0; box-shadow: 0 7px 10px #22222218; } } /* v9-interactive.css */ /* One cohesive demo stage: two subjects, the same interaction language. */ .page-web-interactive .web-cases{background:#f7f3f7} .page-web-interactive .web-cases-heading h2{font-weight:500;letter-spacing:-.045em} .page-web-interactive .web-cases-heading>p{max-width:40ch;color:#706a76} .page-web-interactive .demo-switcher{max-width:1080px;margin:0 auto 15px;display:flex;align-items:center;justify-content:space-between;gap:16px} .demo-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid #e0d7e2;border-radius:14px;background:#ffffff91;box-shadow:inset 0 1px #fff;backdrop-filter:blur(14px)} .demo-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 19px;border:0;border-radius:10px;background:transparent;color:#777080;font:500 13px/1.4 Onest,Arial,sans-serif;cursor:pointer;white-space:nowrap} .demo-tabs button[aria-selected=true]{background:#24222c;color:#fff;box-shadow:0 3px 8px #30263b13} .demo-tabs button[aria-selected=true]:before{content:'';width:5px;height:5px;border-radius:50%;background:#c8ff19} .demo-tabs button:hover{background:#e9e3ec;color:#24222c} .demo-tabs button[aria-selected=true]:hover{background:#38313f;color:white} .demo-tabs button:focus-visible{outline:2px solid #272231;outline-offset:3px} .demo-switcher>p{font-size:11px;line-height:1.5;color:#908794;margin:0} .demo-panel[hidden]{display:none!important} .page-web-interactive .demo-panel .folio-case{border-color:#dcd0df;border-radius:18px} .page-web-interactive .demo-panel .folio-case-top{font-size:10px;font-weight:500;letter-spacing:.035em;color:#776a7c;background:#fff6} .page-web-interactive .demo-panel .folio-case-caption{background:#fff9;border-color:#fff9} .page-web-interactive .engine-case{background:#20212c;border-color:#373440} .page-web-interactive .engine-case .folio-case-top{background:#2d2834;color:#b8adbf;border-bottom-color:#ffffff13} .page-web-interactive .engine-case .folio-case-top span:last-child{color:#b8adbf} .page-web-interactive .engine-case .folio-case-caption{background:#28242f;border-top-color:#ffffff14} .page-web-interactive .engine-case .folio-case-caption p{color:#b6acbd} .page-web-interactive .engine-case .folio-case-caption button{color:#faf7ff} .engine-embed{display:block;width:100%;height:592px;border:0;background:#20212c} .page-web-interactive .project-cta{padding-block:38px} .page-web-interactive .project-cta h2,.page-web-interactive:lang(ru) .project-cta h2{font-size:clamp(34px,3.8vw,56px);line-height:1.12;letter-spacing:-.045em;font-weight:480;margin:16px 0 18px;max-width:25ch} @media(max-width:767px){ .page-web-interactive .demo-switcher{display:block;margin-bottom:13px}.demo-tabs{display:flex;width:100%}.demo-tabs button{flex:1;min-width:0;padding:10px 12px;font-size:12px}.demo-switcher>p{margin-top:10px;font-size:10px} .page-web-interactive .demo-panel .folio-case-top{font-size:8px}.engine-embed{height:614px} .page-web-interactive .project-cta{padding-block:30px}.page-web-interactive .project-cta h2,.page-web-interactive:lang(ru) .project-cta h2{font-size:clamp(30px,8.2vw,38px);max-width:16ch;line-height:1.14} } @media(prefers-reduced-motion:reduce){.demo-tabs *{transition:none!important;animation:none!important}} /* v10-exhibition.css */ /* Silver exhibition frame; dark surfaces belong only to the bounded stage. */ .page-web-interactive .web-cases{padding-block:38px 35px;background:#e5e8eb;border-top:1px solid #d1d7dd;color:#20262b} .page-web-interactive .web-cases-heading{grid-template-columns:minmax(0,1fr) 236px;align-items:center;gap:38px;padding:0 0 24px;border-top:1px solid #bcc6cd;position:relative} .page-web-interactive .web-cases-heading .case-eyebrow{font-size:9px;letter-spacing:.065em;margin:15px 0 24px;color:#606a72} .page-web-interactive .web-cases-heading h2{font-size:clamp(37px,3.6vw,52px);line-height:1.04;letter-spacing:-.047em;font-weight:570;max-width:none;margin:0} .page-web-interactive .web-cases-heading h2 span{display:block;white-space:nowrap} .page-web-interactive .web-cases-heading>p{font-size:13px;line-height:1.6;max-width:27ch;color:#63707a;padding-top:20px} .page-web-interactive .demo-switcher{margin-bottom:16px} .page-web-interactive .demo-tabs{border-color:#bac5ce;background:#f4f7f7b3;box-shadow:inset 0 1px white;border-radius:13px} .page-web-interactive .demo-tabs button{padding:10px 25px;min-width:139px;font-size:12px;border-radius:9px;color:#67757f} .page-web-interactive .demo-tabs button[aria-selected=true]{background:#252c32;color:#f3f6f8;box-shadow:none} .page-web-interactive .demo-tabs button:hover{background:#d9e0e5;color:#252c32} .page-web-interactive .demo-tabs button[aria-selected=true]:hover{background:#343e46;color:#fff} .page-web-interactive .demo-tabs button:focus-visible{outline-color:#252c32} .page-web-interactive .demo-switcher>p{font-size:8px;letter-spacing:.07em;color:#6f7c86;text-transform:uppercase} .page-web-interactive .demo-panel .folio-case{position:relative;border:1px solid #87969f;border-radius:19px;background:#252c32;box-shadow:inset 0 1px #b3c1cc55,0 10px 20px #29394408} .page-web-interactive .demo-panel .folio-case:after{content:'';position:absolute;left:22px;top:44px;width:40px;height:2px;background:#c8ff19;pointer-events:none;z-index:2} .page-web-interactive .demo-panel .folio-embed{background:#252c32;height:470px} .page-web-interactive .demo-panel .engine-embed{background:#252c32} .demo-caption{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0 0} .demo-caption p{font-size:10px;line-height:1.5;color:#71808a;margin:0} .demo-caption .ma-text-button{min-height:32px;font-size:11px;color:#273943;border:0;white-space:nowrap} @media(min-width:768px) and (max-width:1100px){.page-web-interactive .web-cases-heading{grid-template-columns:minmax(0,1fr) 175px;gap:24px}.page-web-interactive .web-cases-heading h2{font-size:clamp(29px,3.85vw,42px)}.page-web-interactive .web-cases-heading>p{font-size:11px}} @media(max-width:767px){ .page-web-interactive .web-cases{padding-block:28px 29px}.page-web-interactive .web-cases-heading{display:block;padding-bottom:18px}.page-web-interactive .web-cases-heading .case-eyebrow{margin:13px 0 20px;font-size:8px} .page-web-interactive .web-cases-heading h2{font-size:clamp(29px,7.8vw,39px);line-height:1.06;font-weight:560;letter-spacing:-.045em}.page-web-interactive .web-cases-heading h2 span{white-space:normal}.page-web-interactive .web-cases-heading>p{padding-top:0;margin-top:16px;font-size:12px;max-width:30ch} .page-web-interactive .demo-tabs button{min-width:0;min-height:44px;font-size:12px}.page-web-interactive .demo-switcher>p{display:none}.page-web-interactive .demo-switcher{margin-bottom:14px} .page-web-interactive .demo-panel .folio-case{border-radius:15px}.page-web-interactive .demo-panel .folio-case:after{left:14px;top:39px;width:29px}.page-web-interactive .demo-panel .folio-embed{height:740px} .demo-caption{padding-top:9px;gap:12px}.demo-caption p{font-size:8px;max-width:19ch}.demo-caption .ma-text-button{font-size:9px} } .page-web-interactive .demo-panel .engine-case:after{top:14px;left:24px} @media(max-width:767px){.page-web-interactive .demo-panel .engine-case:after{left:17px;top:10px}} .preview-ribbon{display:none!important}