@font-face {
    font-family: "Xiaoma Display";
    src: url("../fonts/xiaoma-display.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
/* The four presentation pages have their own art direction and scroll choreography. */
body.motion-design { --blue: #1555f5; --ink: #0b2042; --muted: #53657d; background: #fbfcff; color: var(--ink); }
html:has(body.motion-design) { scroll-behavior: auto; }
.motion-design .frame { width: calc(100% - 12vw); max-width: 1680px; margin-inline: auto; }
.motion-design .motion-main { overflow: clip; }
.motion-design h1, .motion-design h2, .motion-design h3 { font-family: "Xiaoma Display", "Arial", "Microsoft YaHei", sans-serif; font-weight: 700; }
.motion-design .kicker { display: flex; gap: 13px; align-items: center; font: 500 10px/1.5 Arial, sans-serif; letter-spacing: .11em; text-transform: uppercase; margin: 0; }
.motion-design .kicker::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px currentColor; opacity: .6; transform: scale(.5); }
.motion-design .clip-line { display: block; overflow: clip; padding: .06em 0 .12em; margin: -.06em 0 -.12em; }
.motion-design .glyph { display: inline-block; white-space: pre; transform-origin: 50% 100%; }
.motion-design .motion-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.motion-design .motion-link { display: inline-flex; align-items: center; gap: 28px; min-height: 48px; color: inherit; text-decoration: none; font-size: 12px; }
.motion-design .motion-link .arrow-disc { display: grid; place-items: center; width: 47px; height: 47px; border: 1px solid currentColor; border-radius: 50%; overflow: hidden; transition: color .4s, background .4s; }
.motion-design .arrow-disc span { font-size: 22px; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.motion-design .motion-link:hover .arrow-disc { color: #fff; background: var(--blue); border-color: var(--blue); }
.motion-design .motion-link:hover .arrow-disc span { transform: rotate(45deg); }
.motion-design .pill-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 38px; padding: 16px 23px; border-radius: 100px; background: var(--blue); color: #fff; text-decoration: none; font-size: 12px; border: 1px solid transparent; overflow: hidden; transition: background .4s, color .4s; }
.motion-design .pill-link span:last-child { font-size: 20px; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.motion-design .pill-link:hover { background: #0a38b5; }
.motion-design .pill-link:hover span:last-child { transform: translate(4px,-4px); }
html.site-experience body.motion-design header { padding: 22px 0 !important; transition: background .4s, border-color .4s, transform .65s cubic-bezier(.22,1,.36,1); }
.motion-design header .navbar > .container { width: calc(100% - 10vw); }
.motion-design header .logo img { height: 36px; }
.motion-design header .nav-links > li > a:not(.logo) { padding: 10px 16px; font-size: 12px; }
.motion-design .lang-switcher { right: 5vw; top: 32px; transition: transform .65s cubic-bezier(.22,1,.36,1); }
html.site-experience body.motion-design.nav-on-dark header:not(:hover):not(:focus-within):not(.mobile-nav-active) { background: transparent !important; backdrop-filter: none !important; border-color: #ffffff28; }
.motion-design.nav-on-dark header:not(:hover):not(:focus-within):not(.mobile-nav-active) .logo img { filter: brightness(0) invert(1); }
.motion-design.nav-on-dark header:not(:hover):not(:focus-within):not(.mobile-nav-active) .nav-links > li > a:not(.logo) { color: #fff !important; }
.motion-design.nav-on-dark .lang-btn, .motion-design.nav-on-dark .lang-btn.active { color: #fff; }
.motion-design.nav-on-dark .lang-btn + .lang-btn { border-color: #ffffff50; }
.motion-design.nav-on-dark:has(header:hover) .lang-btn, .motion-design.nav-on-dark:has(header:focus-within) .lang-btn { color: var(--ink); }
.motion-design.nav-is-hidden header, .motion-design.nav-is-hidden > .lang-switcher { transform: translateY(-120px); }
.motion-design.nav-is-hidden header:focus-within, .motion-design.nav-is-hidden > .lang-switcher:focus-within { transform: none; }
.motion-design header.mobile-nav-active { transform: none; }
.motion-design .site-progress { background: #6e9fff; height: 2px; }
.motion-design .cinema.film-frame { height: 100svh; min-height: 680px; aspect-ratio: auto; background: #0b2042; overflow: hidden; position: relative; isolation: isolate; }
.motion-design .cinema-media { position: absolute; inset: 0; z-index: -2; }
.motion-design .cinema-media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); filter: saturate(.7); }
.motion-design .cinema.film-frame::after { z-index: -1; inset: 0; background: linear-gradient(90deg,#071d3ed6 0%,#0b21425c 70%), linear-gradient(0deg,#071b3acc,transparent 55%); }
.motion-design .cinema-guides { position: absolute; inset: 0 5vw; border-inline: 1px solid #ffffff10; z-index: -1; pointer-events: none; }
.motion-design .cinema-copy { position: absolute; left: 7vw; top: 25%; color: #fff; }
.motion-design .cinema-copy .kicker { margin-bottom: 28px; }
.motion-design .cinema h1 { font-size: clamp(64px,7.3vw,126px); line-height: 1.12; letter-spacing: -.065em; margin: 0; }
.motion-design .cinema h1 .outline { color: transparent; -webkit-text-stroke: 1px #ffffffd9; }
.motion-design .cinema-aside { position: absolute; right: 7vw; top: 43%; width: 235px; color: #fff; }
.motion-design .cinema-aside p { font-size: 12px; line-height: 1.9; color: #ffffffc7; margin: 0 0 14px; }
.motion-design .cinema-aside .motion-link { font-size: 11px; }
.motion-design .cinema-wordmark { position: absolute; left: 5vw; right: 5vw; bottom: -1.45vw; display: flex; justify-content: space-between; color: #fff; font: 900 18.2vw/.88 "Arial Black", Arial, sans-serif; letter-spacing: -.055em; overflow: clip; }
.motion-design .cinema-wordmark span { display: block; }
.motion-design .cinema-wordmark span:nth-last-child(-n+2) { color: transparent; -webkit-text-stroke: 1.6px #ffffffed; }
.motion-design .cinema-bottom { position: absolute; left: 7vw; right: 7vw; bottom: 20.3vw; display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 9px; letter-spacing: .1em; }
.motion-design .scroll-orbit { display: flex; gap: 16px; align-items: center; text-decoration: none; color: #fff; font-size: 9px; }
.motion-design .orbit-dot { width: 26px; height: 26px; border: 1px solid #ffffff70; border-radius: 50%; position: relative; }
.motion-design .orbit-dot::before { content: ""; position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; top: -2px; left: 10px; }
.motion-design .media-toggle.video-toggle { bottom: auto; top: 108px; right: 5vw; padding: 0; width: 40px; height: 40px; min-height: 40px; border-radius: 50%; font-size: 0; background: #071b3a22; color: #fff; border-color: #ffffff65; }
.motion-design .media-toggle.video-toggle::before { font: 15px Arial; }
.motion-design .manifesto { padding: 135px 0 100px; background: #fbfcff; position: relative; }
.motion-design .manifesto-top { display: grid; grid-template-columns: 1fr 3fr; gap: 30px; }
.motion-design .manifesto-top .kicker { align-self: start; padding-top: 19px; color: var(--blue); }
.motion-design .manifesto h2 { font-size: clamp(40px,5.3vw,90px); letter-spacing: -.055em; line-height: 1.5; margin: 0; }
.motion-design .paint-glyph { color: #ccd5e2; }
.motion-design .manifesto-bottom { display: grid; grid-template-columns: 1fr 1.2fr 1.3fr; gap: 50px; align-items: end; margin-top: 70px; }
.motion-design .manifesto-thumb { margin: 0; overflow: hidden; aspect-ratio: 1.35; }
.motion-design .manifesto-thumb img { width: 100%; height: 100%; object-fit: cover; }
.motion-design .manifesto-caption { font-size: 9px; margin-top: 12px; color: var(--muted); }
.motion-design .manifesto-bottom p { color: var(--muted); font-size: 13px; line-height: 1.9; margin: 0 0 15px; }
.motion-design .cycle-emblem { width: 155px; height: 155px; justify-self: end; position: relative; border: 1px solid #b8cbee; border-radius: 50%; display: grid; place-items: center; }
.motion-design .cycle-emblem::before { content: ""; position: absolute; inset: 14px; border: 1px solid #b8cbee; border-radius: 50%; transform: rotateX(60deg) rotate(-20deg); }
.motion-design .cycle-emblem svg { width: 74px; height: 74px; color: var(--blue); }
.motion-design .cycle-emblem span { position: absolute; bottom: -22px; white-space: nowrap; font-size: 8px; letter-spacing: .14em; color: var(--muted); }
.motion-design .kinetic-strip { padding: 26px 0; overflow: hidden; border-block: 1px solid #dce5f2; background: #fbfcff; }
.motion-design .kinetic-strip-track { width: max-content; display: flex; gap: 36px; align-items: center; font: 700 clamp(42px,6vw,100px)/1.1 Arial,sans-serif; letter-spacing: -.055em; color: var(--blue); white-space: nowrap; }
.motion-design .kinetic-strip-track .hollow { -webkit-text-stroke: 1px var(--blue); color: transparent; }
.motion-design .kinetic-strip-track .strip-star { display: inline-block; font-weight: 400; font-size: .9em; }
.motion-design .collection-heading { padding: 100px 0 55px; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.motion-design .collection-heading h2 { font-size: clamp(38px,5vw,80px); letter-spacing: -.06em; line-height: 1.2; margin: 28px 0 0; }
.motion-design .collection-viewport { position: relative; height: 100svh; min-height: 650px; background: #eaf0fd; overflow: hidden; }
.motion-design .machine-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.motion-design .machine-track::-webkit-scrollbar { display: none; }
.motion-design.motion-running .machine-track { width: max-content; overflow: visible; }
.motion-design .machine-slide { position: relative; width: 100vw; flex: 0 0 100vw; height: 100%; scroll-snap-align: start; background: radial-gradient(ellipse at 70% 45%,#fff 0%,#eaf0fd 65%); isolation: isolate; }
.motion-design .machine-slide:nth-child(2) { background: radial-gradient(ellipse at 72% 45%,#fff 0%,#e4ecfb 70%); }
.motion-design .machine-slide:nth-child(3) { background: radial-gradient(ellipse at 70% 45%,#fff 0%,#e9edf7 70%); }
.motion-design .machine-backdrop { position: absolute; left: 3vw; top: 15%; font: 900 28vw/.8 "Arial Black",Arial,sans-serif; letter-spacing: -.08em; color: #c9d6ec; opacity: .7; z-index: -1; }
.motion-design .machine-visual { position: absolute; width: 56vw; height: 77%; right: 4vw; top: 10%; display: block; }
.motion-design .machine-visual img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.motion-design .machine-info { position: absolute; bottom: 130px; left: 7vw; width: 30vw; }
.motion-design .machine-info .kicker { color: var(--blue); font-size: 9px; }
.motion-design .machine-info h3 { margin: 20px 0; font-size: clamp(36px,4.1vw,68px); line-height: 1.2; letter-spacing: -.06em; }
.motion-design .machine-info p { max-width: 290px; font-size: 12px; color: var(--muted); line-height: 1.9; margin: 0 0 24px; }
.motion-design .machine-tag { position: absolute; right: 7vw; bottom: 115px; font-size: 9px; letter-spacing: .1em; color: var(--muted); }
.motion-design .stage-top { position: absolute; left: 7vw; right: 7vw; top: 110px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 2; font-size: 9px; letter-spacing: .07em; }
.motion-design .stage-top .stage-symbol { font-size: 22px; color: var(--blue); }
.motion-design .stage-bottom { position: absolute; bottom: 35px; left: 7vw; right: 7vw; display: flex; align-items: center; gap: 25px; z-index: 3; }
.motion-design .stage-count { font-size: 11px; font-variant-numeric: tabular-nums; min-width: 60px; }
.motion-design .stage-progress { height: 1px; flex: 1; background: #b7c9e5; }
.motion-design .stage-progress span { display: block; width: 33.333%; height: 1px; background: var(--blue); transform-origin: left; }
.motion-design .stage-buttons { display: flex; gap: 8px; }
.motion-design .stage-button { width: 43px; height: 43px; display: grid; place-items: center; background: transparent; border: 1px solid #acbfdc; border-radius: 50%; color: var(--ink); font-size: 19px; transition: background .3s,color .3s; }
.motion-design .stage-button:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.motion-design .reel-stage.film-frame { position: relative; height: 100svh; min-height: 680px; aspect-ratio: auto; background: #1555f5; overflow: hidden; color: #fff; isolation: isolate; }
.motion-design .reel-stage.film-frame::after { background: linear-gradient(0deg,#071b3aa6,transparent 50%); z-index: 1; top: 40%; }
.motion-design .reel-aperture { position: absolute; inset: 0; overflow: hidden; clip-path: circle(24% at 50% 53%); z-index: 0; }
.motion-design .reel-aperture video { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.motion-design .reel-aperture::after { content: ""; position: absolute; inset: 0; background: #061c4266; pointer-events: none; }
.motion-design .reel-heading { position: absolute; top: 13%; left: 7vw; z-index: 2; pointer-events: none; }
.motion-design .reel-heading h2 { font-size: clamp(70px,12.3vw,200px); line-height: .97; letter-spacing: -.065em; margin: 36px 0 0; }
.motion-design .reel-heading h2 { font-family: "Arial Black",Arial,sans-serif; font-weight: 900; }
.motion-design .reel-heading .reel-second { margin-left: 27vw; }
.motion-design .reel-copy { position: absolute; z-index: 2; left: 7vw; bottom: 65px; max-width: 330px; }
.motion-design .reel-copy p { font-size: 12px; line-height: 1.9; color: #ffffffd1; }
.motion-design .reel-copy .motion-link { color: #fff; font-size: 12px; }
.motion-design .reel-side { position: absolute; bottom: 70px; right: 7vw; z-index: 2; font-size: 9px; writing-mode: vertical-rl; letter-spacing: .12em; }
.motion-design .reel-stage .media-toggle.video-toggle { top: auto; bottom: 65px; right: 12vw; z-index: 3; }
.motion-design .craft { padding: 135px 0 120px; background: #fbfcff; }
.motion-design .craft-heading { display: flex; justify-content: space-between; align-items: start; gap: 40px; margin-bottom: 60px; }
.motion-design .craft-heading > h2 { font-size: clamp(42px,5.2vw,84px); letter-spacing: -.06em; line-height: 1.3; margin: 0; }
.motion-design .craft-heading .kicker { padding-top: 17px; color: var(--blue); }
.motion-design .craft-images { display: grid; grid-template-columns: 1.55fr 1fr; gap: 7vw; align-items: start; }
.motion-design .craft-image { margin: 0; }
.motion-design .craft-image:nth-child(2) { padding-top: 17vw; }
.motion-design .craft-image .image-mask { display: block; overflow: hidden; aspect-ratio: 1.45; position: relative; }
.motion-design .craft-image:nth-child(2) .image-mask { aspect-ratio: .9; }
.motion-design .craft-image img { width: 100%; height: 115%; object-fit: cover; }
.motion-design .craft-image figcaption { padding-top: 15px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; letter-spacing: .07em; }
.motion-design .craft-bottom { margin-top: 65px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 7vw; align-items: start; }
.motion-design .craft-description { max-width: 500px; font-size: 14px; line-height: 2; color: var(--muted); margin: 0; }
.motion-design .craft-bottom .motion-link { justify-self: start; }
.motion-design .closing { padding: 95px 0 0; background: #1555f5; color: #fff; overflow: hidden; position: relative; }
.motion-design .closing-top { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.motion-design .closing h2 { font-size: clamp(48px,6vw,100px); letter-spacing: -.065em; line-height: 1.25; margin: 30px 0 0; }
.motion-design .contact-orb { display: grid; place-items: center; width: 175px; height: 175px; border-radius: 50%; border: 1px solid #ffffff8c; color: #fff; text-decoration: none; flex-shrink: 0; transition: background .4s, color .4s; position: relative; }
.motion-design .contact-orb .magnet-content { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 12px; }
.motion-design .contact-orb .orb-arrow { font: 300 57px/1 Arial; }
.motion-design .contact-orb:hover { background: #fff; color: var(--blue); }
.motion-design .closing-contacts { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-top: 70px; padding-bottom: 30px; border-bottom: 1px solid #ffffff4a; }
.motion-design .closing-contacts > div { display: flex; gap: 38px; }
.motion-design .closing-contacts a { font-size: 12px; color: #fff; text-decoration: none; }
.motion-design .closing-contacts p { max-width: 280px; color: #d5e2ff; font-size: 10px; line-height: 1.8; margin: 0; }
.motion-design .closing-brand { display: flex; justify-content: space-between; margin: 40px -1vw 0; font: 900 18.1vw/.86 "Arial Black", Arial, sans-serif; letter-spacing: -.055em; overflow: clip; }
.motion-design .closing-brand span { display: block; }
.motion-design .closing-footer { display: flex; justify-content: space-between; gap: 20px; padding: 35px 0; font-size: 9px; color: #d5e2ff; }
.motion-design .chapter-nav { position: fixed; right: 23px; top: 47%; display: flex; flex-direction: column; gap: 13px; z-index: 80; color: var(--ink); }
.motion-design.nav-on-dark .chapter-nav { color: #fff; }
.motion-design .chapter-nav a { color: inherit; text-decoration: none; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid transparent; border-radius: 50%; font: 8px Arial; opacity: .5; transition: opacity .4s, border-color .4s; }
.motion-design .chapter-nav a.is-current { border-color: currentColor; opacity: 1; }
.motion-design .motion-cursor { position: fixed; left: 0; top: 0; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; z-index: 9000; background: var(--blue); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: 10px; pointer-events: none; opacity: 0; transform: scale(.3); }
.motion-design .motion-cursor::after { content: "↗"; font-size: 20px; }
.motion-design .catalog-scene { position: relative; min-height: 760px; height: 100svh; background: #edf2fc; overflow: hidden; }
.motion-design .catalog-scene .frame { padding-top: 18vh; position: relative; z-index: 3; pointer-events: none; }
.motion-design .catalog-scene .pill-link { pointer-events: auto; margin-top: 30px; }
.motion-design .catalog-scene h1 { font-size: clamp(50px,6vw,98px); line-height: 1.2; letter-spacing: -.06em; margin: 32px 0 0; max-width: 62%; }
.motion-design .catalog-scene h1 .blue { color: var(--blue); }
.motion-design .catalog-scene .catalog-intro { color: var(--muted); font-size: 12px; line-height: 1.9; max-width: 270px; margin-top: 25px; }
.motion-design .catalog-display { position: absolute; right: 2vw; top: 15vh; width: 55vw; height: 70vh; }
.motion-design .catalog-display img { position: absolute; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.motion-design .catalog-display .catalog-front { width: 80%; left: 15%; z-index: 2; }
.motion-design .catalog-display .catalog-back { width: 46%; left: -4%; top: 6%; z-index: 1; opacity: .76; }
.motion-design .catalog-watermark { position: absolute; bottom: -1vw; left: 4vw; right: 4vw; color: #cfdbf0; font: 900 16.8vw/.9 "Arial Black",Arial,sans-serif; letter-spacing: -.065em; text-align: center; pointer-events: none; }
.motion-design .catalog-scene-index { position: absolute; right: 7vw; bottom: 18vw; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.motion-design .catalog-section { padding: 100px 0; background: #fbfcff; }
.motion-design .catalog-toolbar { margin-bottom: 50px; }
.motion-design .catalog-toolbar .editorial-title { font-size: clamp(32px,4vw,60px); line-height: 1.3; letter-spacing: -.05em; font-weight: 700; }
.motion-design .catalog-filter { border-radius: 100px; border-color: #cad6e8; padding: 12px 19px; }
.motion-design .products-grid-v2 { gap: 55px 28px; }
.motion-design .product-card-v2 { border: none; border-radius: 0; background: transparent; overflow: visible; }
.motion-design .product-image-v2 { aspect-ratio: 1.1; background: #edf2fc; padding: 25px; border-radius: 12px; overflow: hidden; position: relative; perspective: 900px; }
.motion-design .product-image-v2::after { content: ""; position: absolute; inset: 0; border: 1px solid #d2def0; border-radius: inherit; pointer-events: none; transition: border-color .4s; }
.motion-design .product-card-v2:hover { border: 0; }
.motion-design .product-card-v2:hover .product-image-v2::after { border-color: var(--blue); }
.motion-design .product-image-v2 img { transition: none; transform-style: preserve-3d; }
.motion-design .product-card-v2:hover .product-image-v2 img { transform: none; }
.motion-design .product-content-v2 { min-height: 84px; padding: 20px 3px 0; }
.motion-design .product-content-v2::after { right: 3px; }
.motion-design .product-name { font-family: inherit; font-weight: 500; }
.motion-design .catalog-note { margin-top: 50px; font-size: 11px; }
.motion-design .catalog-film { padding: 30px 0 100px; }
.motion-design .catalog-film-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 40px; }
.motion-design .catalog-film-heading h2 { font-size: clamp(38px,5vw,78px); line-height: 1.25; letter-spacing: -.06em; margin: 25px 0 0; }
.motion-design .catalog-film-heading p { max-width: 290px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.motion-design .catalog-film .film-frame { border-radius: 18px; aspect-ratio: 1.9; }
.motion-design .catalog-film .media-toggle { top: auto; bottom: 25px; right: 25px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.motion-design:lang(en) .machine-info h3 { font-family: Arial,sans-serif; font-size: clamp(30px,3.6vw,56px); letter-spacing: -.055em; }
@media (max-width: 1200px) and (min-width: 993px) {
    .motion-design header .nav-links > li > a:not(.logo) { padding-inline: 10px; }
    .motion-design .cinema-aside { width: 190px; right: 6vw; }
    .motion-design .machine-info { width: 33vw; }
}
@media (max-width: 992px) {
    .motion-design .frame { width: calc(100% - 10vw); }
    html.site-experience body.motion-design header { padding: 18px 0 !important; }
    .motion-design .lang-switcher { top: 30px; right: 5vw; }
    .motion-design header .mobile-menu-btn { margin-right: 113px; border-radius: 100px; }
    .motion-design.nav-on-dark header:not(:hover):not(.mobile-nav-active) .mobile-menu-btn { color: #fff !important; background: #ffffff15; border-color: #ffffff70; }
    .motion-design .cinema.film-frame { min-height: 700px; }
    .motion-design .cinema-copy { left: 6vw; top: 26%; }
    .motion-design .cinema h1 { font-size: 8.8vw; }
    .motion-design .cinema-aside { top: 47%; right: 6vw; width: 200px; }
    .motion-design .cinema-bottom { bottom: 22vw; left: 6vw; right: 6vw; }
    .motion-design .manifesto { padding: 95px 0 80px; }
    .motion-design .manifesto-top { grid-template-columns: 1fr; gap: 32px; }
    .motion-design .manifesto h2 { font-size: clamp(35px,6.7vw,70px); }
    .motion-design .manifesto-bottom { grid-template-columns: 1.2fr 1.5fr; gap: 40px; }
    .motion-design .cycle-emblem { display: none; }
    .motion-design .collection-heading { padding: 75px 0 40px; }
    .motion-design .collection-viewport { height: 88svh; min-height: 670px; }
    .motion-design .machine-info { top: auto; bottom: 105px; left: 6vw; width: 45vw; }
    .motion-design .machine-info h3 { font-size: 42px; }
    .motion-design .machine-info p { font-size: 11px; }
    .motion-design .machine-visual { width: 60vw; right: 2vw; height: 67%; top: 6%; }
    .motion-design .machine-backdrop { top: 15%; }
    .motion-design .stage-top { top: 45px; left: 6vw; right: 6vw; }
    .motion-design .reel-stage.film-frame { min-height: 680px; height: 90svh; }
    .motion-design .reel-heading { top: 15%; left: 6vw; }
    .motion-design .reel-heading h2 { font-size: 13vw; }
    .motion-design .reel-heading .reel-second { margin-left: 20vw; }
    .motion-design .craft { padding: 90px 0; }
    .motion-design .craft-heading { flex-direction: column; gap: 30px; }
    .motion-design .craft-images { gap: 5vw; }
    .motion-design .closing { padding-top: 70px; }
    .motion-design .closing-top { gap: 30px; }
    .motion-design .contact-orb { width: 140px; height: 140px; }
    .motion-design .catalog-scene { height: 90svh; min-height: 750px; }
    .motion-design .catalog-scene h1 { font-size: 7vw; }
    .motion-design .catalog-display { width: 61vw; top: 19vh; right: 0; height: 61vh; }
    .motion-design .catalog-watermark { font-size: 17vw; }
    .motion-design .chapter-nav { right: 12px; }
}
@media (max-width: 640px) {
    .motion-design .frame { width: calc(100% - 40px); }
    .motion-design header .navbar > .container { width: calc(100% - 40px); }
    html.site-experience body.motion-design header { padding: 15px 0 !important; }
    .motion-design header .logo img { height: 28px; }
    .motion-design header .mobile-menu-btn { margin-right: 95px; min-width: 50px; height: 33px; min-height: 33px; }
    .motion-design .lang-switcher { top: 27px; right: 14px; }
    .motion-design .kicker { font-size: 8px; letter-spacing: .07em; }
    .motion-design .cinema.film-frame { min-height: 670px; height: 100svh; max-height: 1100px; }
    .motion-design .cinema-media video { object-position: 60% center; }
    .motion-design .cinema-copy { left: 24px; right: 24px; top: 25%; }
    .motion-design .cinema h1 { font-size: clamp(42px,min(13.7vw,11svh),88px); line-height: 1.18; }
    .motion-design .cinema-copy .kicker { margin-bottom: 30px; }
    .motion-design .cinema-aside { left: 25px; right: auto; top: 56%; width: 245px; }
    .motion-design .cinema-aside p { font-size: 11px; max-width: 245px; }
    .motion-design .cinema-aside .motion-link { gap: 22px; }
    .motion-design .cinema-aside .arrow-disc { width: 38px; height: 38px; }
    .motion-design .cinema-bottom { left: 25px; right: 25px; bottom: 28vw; font-size: 7px; gap: 15px; }
    .motion-design .cinema-bottom > span { max-width: 160px; line-height: 1.8; }
    .motion-design .cinema-wordmark { left: 4vw; right: 4vw; bottom: 5vw; font-size: 19vw; }
    .motion-design .media-toggle.video-toggle { top: 91px; right: 23px; width: 34px; height: 34px; min-height: 34px; }
    .motion-design .scroll-orbit { font-size: 7px; gap: 10px; }
    .motion-design .manifesto { padding: 70px 0 55px; }
    .motion-design .manifesto-top { gap: 27px; }
    .motion-design .manifesto h2 { font-size: clamp(30px,8.8vw,55px); line-height: 1.55; letter-spacing: -.055em; }
    .motion-design .manifesto-bottom { grid-template-columns: 1fr; gap: 30px; margin-top: 34px; }
    .motion-design .manifesto-bottom > div:first-child { max-width: 70%; }
    .motion-design .manifesto-bottom p { font-size: 12px; }
    .motion-design .kinetic-strip { padding-block: 20px; }
    .motion-design .kinetic-strip-track { gap: 20px; font-size: 47px; }
    .motion-design .collection-heading { padding: 60px 0 32px; display: block; }
    .motion-design .collection-heading h2 { font-size: 38px; margin-top: 22px; }
    .motion-design .collection-heading .motion-link { margin-top: 16px; }
    .motion-design .collection-viewport { min-height: 690px; height: 92svh; max-height: 1000px; }
    .motion-design .machine-info { top: auto; left: 25px; bottom: 105px; width: calc(100% - 50px); }
    .motion-design .machine-info .kicker { font-size: 8px; }
    .motion-design .machine-info h3 { font-size: 34px; margin: 13px 0; }
    .motion-design:lang(en) .machine-info h3 { font-size: 30px; }
    .motion-design .machine-info p { max-width: 285px; line-height: 1.8; margin-bottom: 15px; }
    .motion-design .machine-info .pill-link { padding: 12px 18px; font-size: 10px; }
    .motion-design .machine-visual { left: 5vw; right: auto; top: 6%; width: 90vw; height: 44%; }
    .motion-design .machine-backdrop { top: 15%; left: 3vw; font-size: 38vw; }
    .motion-design .machine-tag { display: none; }
    .motion-design .stage-top { top: 28px; left: 25px; right: 25px; font-size: 7px; }
    .motion-design .stage-top .stage-symbol { font-size: 18px; }
    .motion-design .stage-bottom { left: 25px; right: 25px; bottom: 25px; gap: 15px; }
    .motion-design .stage-button { width: 36px; height: 36px; }
    .motion-design .reel-stage.film-frame { min-height: 640px; height: 90svh; }
    .motion-design .reel-heading { top: 13%; left: 25px; }
    .motion-design .reel-heading h2 { font-size: 17vw; margin-top: 35px; }
    .motion-design .reel-heading .reel-second { margin-left: 9vw; }
    .motion-design .reel-aperture { clip-path: circle(33% at 50% 50%); }
    .motion-design .reel-copy { left: 25px; right: 70px; bottom: 45px; max-width: 270px; }
    .motion-design .reel-copy p { font-size: 11px; }
    .motion-design .reel-stage .media-toggle.video-toggle { right: 23px; bottom: 54px; }
    .motion-design .reel-side { display: none; }
    .motion-design .craft { padding: 70px 0; }
    .motion-design .craft-heading { gap: 25px; margin-bottom: 35px; }
    .motion-design .craft-heading > h2 { font-size: 38px; }
    .motion-design .craft-images { grid-template-columns: 1fr; gap: 30px; }
    .motion-design .craft-image:nth-child(2) { padding-top: 0; margin-left: 24%; }
    .motion-design .craft-image:nth-child(2) .image-mask { aspect-ratio: 1.1; }
    .motion-design .craft-bottom { grid-template-columns: 1fr; gap: 25px; margin-top: 35px; }
    .motion-design .craft-description { font-size: 12px; }
    .motion-design .closing { padding-top: 60px; }
    .motion-design .closing-top { display: block; }
    .motion-design .closing h2 { font-size: 10vw; margin-top: 28px; }
    .motion-design .contact-orb { width: 110px; height: 110px; margin: 30px 0 0 auto; }
    .motion-design .contact-orb .magnet-content { font-size: 10px; gap: 9px; }
    .motion-design .contact-orb .orb-arrow { font-size: 38px; }
    .motion-design .closing-contacts { display: block; margin-top: 30px; }
    .motion-design .closing-contacts > div { flex-direction: column; gap: 15px; margin-bottom: 28px; }
    .motion-design .closing-contacts a { font-size: 12px; }
    .motion-design .closing-brand { font-size: 19.4vw; margin-top: 32px; }
    .motion-design .closing-footer { padding: 25px 0; font-size: 8px; align-items: center; }
    .motion-design .closing-footer > span:first-child { max-width: 130px; line-height: 1.7; }
    .motion-design .chapter-nav { display: none; }
    .motion-design .catalog-scene { min-height: 800px; height: 100svh; }
    .motion-design .catalog-scene .frame { padding-top: 125px; }
    .motion-design .catalog-scene h1 { font-size: 11vw; max-width: none; margin-top: 25px; }
    .motion-design .catalog-scene .catalog-intro { max-width: 275px; font-size: 11px; margin-top: 20px; }
    .motion-design .catalog-scene .pill-link { padding: 11px 18px; margin-top: 15px; font-size: 10px; }
    .motion-design .catalog-display { top: auto; right: 0; bottom: 45px; height: 47%; width: 100%; }
    .motion-design .catalog-display .catalog-front { width: 76%; left: 24%; }
    .motion-design .catalog-display .catalog-back { width: 47%; left: 1%; }
    .motion-design .catalog-watermark { bottom: 30px; left: 2vw; right: 2vw; font-size: 17.6vw; }
    .motion-design .catalog-scene-index { right: 25px; bottom: 28px; font-size: 7px; }
    .motion-design .catalog-section { padding: 60px 0; }
    .motion-design .catalog-toolbar .editorial-title { font-size: 30px; }
    .motion-design .catalog-filter { padding: 10px 13px; font-size: 10px; }
    .motion-design .products-grid-v2 { gap: 30px 12px; }
    .motion-design .product-image-v2 { padding: 9px; border-radius: 8px; }
    .motion-design .product-content-v2 { padding: 15px 0 0; min-height: 80px; }
    .motion-design .product-name { font-size: 12px; }
    .motion-design .catalog-film { padding: 10px 0 60px; }
    .motion-design .catalog-film-heading { display: block; margin-bottom: 30px; }
    .motion-design .catalog-film-heading h2 { font-size: 36px; }
    .motion-design .catalog-film-heading p { font-size: 11px; margin-top: 20px; }
    .motion-design .catalog-film .film-frame { aspect-ratio: 1.1; border-radius: 9px; }
}
@media (min-aspect-ratio: 2/1) and (min-width: 993px) {
    .motion-design .cinema-copy { top: 23%; }
    .motion-design .cinema h1 { font-size: clamp(60px,5.8vw,105px); }
    .motion-design .cinema-wordmark { font-size: 16vw; }
    .motion-design .cinema-bottom { bottom: 18vw; }
}
@media (prefers-reduced-motion: reduce) {
    .motion-design .paint-glyph { color: var(--ink); }
    .motion-design .glyph { transform: none !important; opacity: 1 !important; }
    .motion-design .reel-aperture { clip-path: inset(0); }
    .motion-design .reel-heading h2 { font-size: 8vw; }
    .motion-design .reel-aperture::after { content: ""; position: absolute; inset: 0; background: #071b3a66; }
    .motion-design .motion-cursor { display: none; }
}