:root { --ink:#0a0a0a; --paper:#f0f0eb; --blue:#6f7cff; --line:rgba(10,10,10,.18); --mouse-x:-100px; --mouse-y:-100px; --mx:0px; --my:0px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"Helvetica Neue","PingFang SC","Noto Sans SC",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,a { color:inherit; font:inherit; }
button { border:0; padding:0; background:none; cursor:pointer; }
a { text-decoration:none; }
.loader { position:fixed; z-index:1000; inset:0; display:grid; place-content:center; gap:16px; color:#fff; background:#050505; transition:transform .9s cubic-bezier(.76,0,.24,1); }
.loader--done { transform:translateY(-100%); }
.loader__mark { font-size:clamp(64px,10vw,140px); font-weight:900; letter-spacing:-.09em; }
.loader__line { width:min(300px,50vw); height:1px; background:#fff; animation:loading-line .8s ease both; }
.loader__copy { font-size:10px; letter-spacing:.24em; text-transform:uppercase; }
@keyframes loading-line { from{transform:scaleX(0);transform-origin:left} to{transform:scaleX(1);transform-origin:left} }
.cursor { position:fixed; z-index:900; left:var(--mouse-x); top:var(--mouse-y); width:16px; height:16px; pointer-events:none; border:1px solid #d8ddff; border-radius:50%; transform:translate(-50%,-50%); mix-blend-mode:difference; }
.progress { position:fixed; z-index:950; top:0; left:0; width:100%; height:3px; background:#aeb6ff; transform-origin:left; }
.site-header { position:absolute; z-index:20; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:26px 34px; color:#fff; }
.brand { display:flex; align-items:center; gap:12px; color:#fff; text-align:left; }
.brand span { font-size:26px; font-weight:900; letter-spacing:-.08em; }
.brand small { max-width:70px; font-size:8px; line-height:1.2; letter-spacing:.12em; text-transform:uppercase; }
.desktop-nav { display:flex; gap:36px; }
.desktop-nav button,.menu-trigger { position:relative; color:#fff; font-size:10px; letter-spacing:.16em; }
.desktop-nav button::after { position:absolute; right:0; bottom:-5px; left:0; height:1px; background:currentColor; content:""; transform:scaleX(0); transform-origin:right; transition:transform .3s; }
.desktop-nav button:hover::after { transform:scaleX(1); transform-origin:left; }
.menu-trigger { display:none; }
.menu-panel { position:fixed; z-index:980; inset:0; display:flex; flex-direction:column; justify-content:center; padding:8vw; color:#fff; background:#0b0d18; transform:translateY(-100%); transition:transform .7s cubic-bezier(.76,0,.24,1); }
.menu-panel--open { transform:translateY(0); }
.menu-close { position:absolute; top:28px; right:28px; color:#fff; font-size:11px; letter-spacing:.15em; }
.menu-link { display:flex; align-items:baseline; gap:20px; color:#fff; font-size:clamp(52px,12vw,120px); font-weight:900; letter-spacing:-.07em; text-align:left; }
.menu-link span { font-size:10px; font-weight:400; letter-spacing:.2em; }
.hero { position:relative; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:130px 32px 34px; color:#fff; background:#03050c; }
.hero--laptop { min-height:0; display:block; padding:0; background:#000; }
.hero-stage { position:relative; width:100%; aspect-ratio:2382/1500; overflow:hidden; background:#000; }
.home-art { position:absolute; inset:0; display:block; opacity:0; transform:scale(1.025); }
.home-art img { display:block; width:100%; height:100%; object-fit:cover; }
.hero--laptop.is-playing .home-art { animation:home-art-in 1.25s .2s cubic-bezier(.16,1,.3,1) both; }
@keyframes home-art-in { to{opacity:1;transform:scale(1)} }
.home-icons { position:absolute; z-index:4; inset:0; pointer-events:none; }
.home-icon { position:absolute; width:var(--icon-size); aspect-ratio:1; pointer-events:auto; border-radius:24%; animation:home-icon-breathe 4.8s var(--icon-delay,0s) ease-in-out infinite; }
.home-icon img { display:block; width:100%; height:100%; object-fit:contain; border-radius:inherit; filter:drop-shadow(0 8px 15px rgba(0,0,0,.18)); transition:transform .35s cubic-bezier(.16,1,.3,1),filter .35s; }
.home-icon:hover img { transform:scale(1.08); filter:brightness(1.1) drop-shadow(0 12px 24px rgba(150,165,255,.34)); }
@keyframes home-icon-breathe { 50%{transform:scale(1.022)} }
.home-icon--ai { left:30%; top:23%; --icon-size:8.2%; --icon-delay:0s; }
.home-icon--ps { left:59.8%; top:18.4%; --icon-size:7.8%; --icon-delay:.5s; }
.home-icon--gpt { left:45.4%; top:30.4%; --icon-size:5.3%; --icon-delay:1s; }
.home-icon--mj { left:30.7%; top:44%; --icon-size:4.8%; --icon-delay:1.5s; border-radius:50%; }
.home-icon--c4d { left:38.3%; top:51.7%; --icon-size:4.1%; --icon-delay:2s; border-radius:50%; }
.home-icon--codex { left:25.15%; top:57.35%; --icon-size:3.85%; --icon-delay:2.5s; }
.home-enter { position:absolute; z-index:6; left:45.2%; top:80.6%; width:9.5%; aspect-ratio:1; border-radius:50%; transition:background .3s,box-shadow .3s,transform .3s; }
.home-enter:hover { background:rgba(255,255,255,.08); box-shadow:0 0 40px rgba(174,182,255,.35); transform:scale(1.05); }
.hero__visual { position:absolute; inset:-8%; width:116%; height:116%; object-fit:cover; opacity:.84; transform:translate(var(--mx),var(--my)) scale(calc(1.08 + min(var(--scroll,0) * .00008,.18))); transition:transform .2s ease-out; }
.hero__shade { position:absolute; inset:0; background:rgba(0,0,0,.28); }
.hero__eyebrow,.hero__title,.hero__intro,.round-link,.hero__foot { position:relative; z-index:2; }
.hero__eyebrow { margin-bottom:24px; font-size:9px; letter-spacing:.28em; text-align:center; }
.hero__title { margin:0; font-size:clamp(80px,15.5vw,240px); line-height:.72; letter-spacing:-.105em; text-align:center; text-transform:uppercase; }
.hero__title span { display:block; }
.hero__title span:last-child { margin-left:-.05em; }
.hero__title i,.contact__mail i { color:#aeb6ff; font-family:Georgia,serif; font-weight:400; }
.hero__intro { max-width:480px; margin:40px 0 0; color:rgba(255,255,255,.72); font-size:13px; letter-spacing:.08em; text-align:center; }
.round-link { width:110px; height:110px; margin-top:42px; color:#fff; border:1px solid rgba(255,255,255,.45); border-radius:50%; font-size:8px; line-height:1.45; letter-spacing:.16em; transition:background .3s,color .3s,transform .3s; animation:float 3.5s ease-in-out infinite; }
.round-link:hover { color:var(--ink); background:#fff; transform:scale(1.07); }
@keyframes float { 50%{translate:0 8px} }
.hero__foot { position:absolute; right:34px; bottom:28px; left:34px; display:flex; justify-content:space-between; font-size:8px; letter-spacing:.15em; }
.statement { overflow:hidden; background:var(--paper); }
.statement__ticker { padding:20px 0 16px; overflow:hidden; border-bottom:1px solid var(--line); white-space:nowrap; }
.statement__ticker div { width:max-content; font-size:11px; letter-spacing:.2em; animation:ticker 22s linear infinite; }
@keyframes ticker { to{transform:translateX(-50%)} }
.statement__art { position:relative; width:100%; background:#fff; }
.statement__art img { display:block; width:100%; height:auto; }
.statement__grid,.work,.services,.contact { width:min(1500px,100%); margin:0 auto; padding:110px 34px; }
.statement__grid { display:grid; grid-template-columns:1fr 3fr; gap:60px 20px; }
.kicker { margin:0; font-size:9px; letter-spacing:.2em; }
.statement__main { position:relative; min-height:700px; }
.statement__main h2 { position:relative; z-index:3; margin:0; font-size:clamp(74px,11.2vw,180px); line-height:.88; letter-spacing:-.09em; font-weight:900; }
.statement__main h2 span { display:block; }
.statement__main h2 span:last-child { margin-left:8vw; }
.statement__main em { color:var(--blue); font-family:Georgia,serif; font-weight:400; }
.portrait { position:absolute; z-index:2; right:14%; bottom:0; width:min(34vw,430px); max-height:590px; object-fit:cover; object-position:center 12%; border-radius:48% 48% 4px 4px; filter:saturate(.72) contrast(1.03); }
.orbit { position:absolute; border:1px solid rgba(58,67,143,.36); border-radius:50%; animation:orbit 12s linear infinite; }
.orbit--one { right:5%; bottom:5%; width:430px; height:430px; }
.orbit--two { right:0; bottom:0; width:550px; height:550px; animation-direction:reverse; animation-duration:18s; }
@keyframes orbit { to{transform:rotate(360deg) scale(1.02)} }
.statement__copy { grid-column:2; display:grid; grid-template-columns:repeat(2,1fr); gap:40px; max-width:850px; font-size:14px; line-height:1.9; }
.statement__copy p { margin:0; }
.stats { grid-column:2; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }
.stats div { display:flex; flex-direction:column; gap:10px; padding:26px 16px 0 0; }
.stats strong { font-size:clamp(42px,6vw,82px); line-height:1; letter-spacing:-.08em; }
.stats span { font-size:8px; letter-spacing:.16em; }
.work { color:#fff; background:#0a0a0a; box-shadow:0 0 0 100vmax #0a0a0a; clip-path:inset(0 -100vmax); }
.section-head { display:flex; flex-direction:column; align-items:center; gap:24px; margin-bottom:64px; text-align:center; }
.section-head h2 { margin:0; font-size:clamp(64px,10vw,150px); line-height:.92; letter-spacing:-.09em; }
.section-head>p:last-child { max-width:none; margin:0; color:rgba(255,255,255,.55); font-size:12px; line-height:1.8; white-space:nowrap; }
.filters { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-bottom:60px; }
.filters button { padding:9px 15px; color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.2); border-radius:999px; font-size:10px; transition:color .2s,background .2s; }
.filters button.active,.filters button:hover { color:var(--ink); background:#fff; }
.project-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:70px 24px; }
.project-card { grid-column:span 6; color:#fff; text-align:left; }
.project-card--2 { grid-column:3/span 8; }
.project-card__image { position:relative; aspect-ratio:16/9; overflow:hidden; background:#161616; }
.project-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1),filter .4s; }
.project-card__image b { position:absolute; z-index:2; top:16px; left:16px; padding:7px 10px; color:#fff; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.25); border-radius:999px; font-size:8px; font-weight:400; letter-spacing:.13em; backdrop-filter:blur(8px); }
.project-card__view { position:absolute; top:50%; left:50%; display:grid; place-items:center; width:100px; height:100px; color:var(--ink); background:#fff; border-radius:50%; font-size:8px; letter-spacing:.14em; opacity:0; transform:translate(-50%,-30%); transition:opacity .3s,transform .3s; }
.project-card:hover .project-card__image img { transform:scale(1.045); filter:brightness(.68); }
.project-card:hover .project-card__view { opacity:1; transform:translate(-50%,-50%); }
.project-card__meta { display:flex; justify-content:space-between; padding:14px 0 12px; color:rgba(255,255,255,.48); border-bottom:1px solid rgba(255,255,255,.22); font-size:8px; letter-spacing:.13em; }
.project-card h3 { margin:14px 0 2px; font-size:clamp(22px,2.5vw,36px); letter-spacing:-.055em; }
.project-card p { margin:0; color:rgba(255,255,255,.45); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.category-divider { position:relative; z-index:2; height:3px; background:#090909; }
.category-divider img { display:block; width:calc(100% - 68px); height:3px; margin:0 auto; object-fit:cover; }
[data-category-panel]:not(.is-active) { display:none!important; }
[data-category-panel].is-active { display:block; scroll-margin-top:70px; }
.category-intro { display:flex; flex-direction:column; align-items:center; gap:17px; padding:110px 34px 72px; color:#fff; background:#111; text-align:center; }
[data-category-panel].category-intro.is-active { display:flex; }
.category-intro h2,.category-work__head h2 { margin:0; font-size:clamp(64px,9vw,132px); line-height:.9; letter-spacing:-.085em; }
.category-intro>p:last-child,.category-work__head>p:last-child { margin:0; color:rgba(255,255,255,.45); font-size:9px; letter-spacing:.16em; }
.brand-vi,.ecommerce { padding:110px 34px; color:#fff; background:#111; }
.brand-vi { padding-top:28px; padding-bottom:48px; }
.ecommerce { padding-top:58px; }
.brand-vi__head,.ecommerce__head { display:flex; flex-direction:column; align-items:center; gap:18px; margin:0 auto 64px; text-align:center; }
.brand-vi__head h2,.ecommerce__head h2 { margin:0; font-size:clamp(58px,9vw,132px); line-height:.9; letter-spacing:-.085em; }
.brand-vi__head>p:last-child,.ecommerce__head>p:last-child { margin:0; color:rgba(255,255,255,.48); font-size:10px; letter-spacing:.14em; }
.brand-vi-feature-grid,
.ecommerce-feature-grid { width:min(1500px,100%); margin:0 auto 110px; display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.brand-vi-feature,
.ecommerce-feature { color:#fff; text-align:left; }
.brand-vi-feature__image,
.ecommerce-feature__image { position:relative; aspect-ratio:16/9; overflow:hidden; background:#191919; }
.brand-vi-feature__image img,
.ecommerce-feature__image img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1),filter .35s; }
.brand-vi-feature__image span,
.ecommerce-feature__image span { position:absolute; top:50%; left:50%; display:grid; place-items:center; width:96px; height:96px; color:#111; background:#fff; border-radius:50%; font-size:8px; letter-spacing:.13em; opacity:0; transform:translate(-50%,-35%); transition:opacity .3s,transform .3s; }
.brand-vi-feature:hover .brand-vi-feature__image img,
.ecommerce-feature:hover .ecommerce-feature__image img { transform:scale(1.04); filter:brightness(.65); }
.brand-vi-feature:hover .brand-vi-feature__image span,
.ecommerce-feature:hover .ecommerce-feature__image span { opacity:1; transform:translate(-50%,-50%); }
.brand-vi-feature>div:last-child,
.ecommerce-feature>div:last-child { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-top:15px; }
.brand-vi-feature h3,
.ecommerce-feature h3 { margin:0; font-size:clamp(22px,2.5vw,38px); letter-spacing:-.055em; }
.brand-vi-feature p,
.ecommerce-feature p { margin:0; color:rgba(255,255,255,.45); font-size:8px; letter-spacing:.13em; text-transform:uppercase; }
.brand-vi-manuals { width:min(1500px,100%); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:50px 18px; padding-top:40px; border-top:1px solid rgba(255,255,255,.18); }
.brand-vi-manual { color:#fff; text-align:left; }
.brand-vi-manual__preview { position:relative; aspect-ratio:4/3; overflow:hidden; background:#191919; }
.brand-vi-manual__preview img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .8s cubic-bezier(.16,1,.3,1),filter .35s; }
.brand-vi-manual__preview span { position:absolute; right:14px; bottom:12px; color:#fff; font-size:8px; letter-spacing:.14em; opacity:.75; }
.brand-vi-manual:hover .brand-vi-manual__preview img { transform:scale(1.04); filter:brightness(.68); }
.brand-vi-manual h3 { margin:13px 0 4px; font-size:17px; letter-spacing:-.03em; }
.brand-vi-manual p { margin:0; color:rgba(255,255,255,.4); font-size:8px; letter-spacing:.14em; }
.ecommerce-group { width:min(1500px,100%); margin:0 auto 100px; }
.ecommerce-group:last-child { margin-bottom:0; }
.ecommerce-group__head { display:flex; align-items:end; justify-content:space-between; margin-bottom:25px; padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,.2); }
.ecommerce-group__head h3 { margin:0; font-size:clamp(30px,4vw,58px); letter-spacing:-.06em; }
.ecommerce-group__head span { color:rgba(255,255,255,.4); font-size:8px; letter-spacing:.14em; }
.ecommerce-grid { width:min(1500px,100%); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:42px 18px; }
.ecommerce-card { color:#fff; text-align:left; }
.ecommerce-card__preview { position:relative; height:430px; overflow:hidden; background:#191919; }
.ecommerce-card__preview img { width:100%; height:auto; min-height:100%; object-fit:cover; object-position:top center; transition:transform .8s cubic-bezier(.16,1,.3,1),filter .35s; }
.ecommerce-card__preview::after { position:absolute; right:0; bottom:0; left:0; height:35%; background:linear-gradient(transparent,rgba(0,0,0,.72)); content:""; }
.ecommerce-card__preview span { position:absolute; z-index:2; right:15px; bottom:14px; font-size:8px; letter-spacing:.15em; }
.ecommerce-card:hover .ecommerce-card__preview img { transform:scale(1.035); filter:brightness(.72); }
.ecommerce-card h3 { margin:13px 0 4px; font-size:17px; letter-spacing:-.03em; }
.ecommerce-card p { margin:0; color:rgba(255,255,255,.4); font-size:8px; letter-spacing:.14em; }
.ecommerce-viewer { position:fixed; z-index:990; inset:0; overflow-y:auto; color:#fff; background:#070707; opacity:0; visibility:hidden; transform:translateY(20px); transition:opacity .4s,visibility .4s,transform .4s; }
.ecommerce-viewer--open { opacity:1; visibility:visible; transform:translateY(0); }
.ecommerce-viewer__bar { position:sticky; z-index:3; top:0; display:flex; align-items:center; justify-content:space-between; padding:18px 26px; background:rgba(7,7,7,.92); border-bottom:1px solid rgba(255,255,255,.14); backdrop-filter:blur(14px); }
.ecommerce-viewer__bar div { display:flex; align-items:center; gap:18px; }
.ecommerce-viewer__bar span,.ecommerce-viewer__bar strong,.ecommerce-viewer__close,.ecommerce-viewer__nav button { font-size:9px; font-weight:400; letter-spacing:.14em; }
.ecommerce-viewer__bar span { color:rgba(255,255,255,.45); }
.ecommerce-viewer__close { padding:10px 15px; border:1px solid rgba(255,255,255,.35); border-radius:999px; }
.ecommerce-viewer__canvas { display:flex; justify-content:center; padding:44px 24px 80px; }
.ecommerce-viewer__canvas img { display:block; width:min(900px,100%); height:auto; box-shadow:0 30px 100px rgba(0,0,0,.5); }
.ecommerce-viewer__nav { display:flex; justify-content:space-between; padding:24px 26px 34px; border-top:1px solid rgba(255,255,255,.14); }
.ecommerce-viewer__nav button { padding:12px 0; color:rgba(255,255,255,.7); }
.ecommerce-viewer__nav button:hover { color:#fff; }
.brand-vi-viewer { position:fixed; z-index:995; inset:0; display:flex; flex-direction:column; color:#fff; background:#070707; opacity:0; visibility:hidden; transform:translateY(20px); transition:opacity .4s,visibility .4s,transform .4s; }
.brand-vi-viewer--open { opacity:1; visibility:visible; transform:translateY(0); }
.brand-vi-viewer__bar { z-index:3; display:flex; align-items:center; justify-content:space-between; padding:18px 26px; background:#070707; border-bottom:1px solid rgba(255,255,255,.14); }
.brand-vi-viewer__bar div { display:flex; align-items:center; gap:18px; }
.brand-vi-viewer__bar span,.brand-vi-viewer__bar strong,.brand-vi-viewer__close,.brand-vi-viewer__nav button { font-size:9px; font-weight:400; letter-spacing:.14em; }
.brand-vi-viewer__bar span { color:rgba(255,255,255,.45); }
.brand-vi-viewer__close { padding:10px 15px; border:1px solid rgba(255,255,255,.35); border-radius:999px; }
.brand-vi-viewer__canvas { flex:1; min-height:0; overflow:auto; display:flex; justify-content:center; background:#181818; }
.brand-vi-viewer__canvas iframe { width:100%; height:100%; border:0; background:#fff; }
.brand-vi-viewer__canvas img { display:block; width:min(1000px,100%); height:max-content; margin:30px auto 70px; box-shadow:0 30px 100px rgba(0,0,0,.5); }
.brand-vi-viewer__canvas > iframe[hidden],.brand-vi-viewer__canvas > img[hidden] { display:none!important; }
.brand-vi-viewer__gallery { flex:none; width:min(1200px,100%); margin:0 auto; padding:36px 24px 70px; display:flex; flex-direction:column; gap:22px; }
.brand-vi-viewer__gallery img { width:100%; max-width:none; margin:0; }
.brand-vi-viewer__nav { display:flex; justify-content:space-between; padding:16px 26px 20px; border-top:1px solid rgba(255,255,255,.14); background:#070707; }
.brand-vi-viewer__nav button { padding:8px 0; color:rgba(255,255,255,.7); }
.brand-vi-viewer__nav button:hover { color:#fff; }
.category-work { padding:94px 34px 120px; color:#fff; background:#090909; }
#offline,#poster,#beauty { background:#090909; }
#online,#automotive { background:#111; }
.category-work__head { display:flex; flex-direction:column; align-items:center; gap:18px; width:min(1500px,100%); margin:0 auto 75px; text-align:center; }
.category-work__grid { width:min(1500px,100%); margin:0 auto; display:grid; grid-template-columns:repeat(12,1fr); gap:70px 24px; }
.category-card { grid-column:span 6; color:#fff; text-align:left; }
.category-card--2 { grid-column:3/span 8; }
.category-work__grid:has(> .category-card:only-child) .category-card { grid-column:3/span 8; }
.category-card__image { position:relative; aspect-ratio:16/9; overflow:hidden; background:#191919; }
.category-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1),filter .35s; }
.category-card__image span { position:absolute; top:50%; left:50%; display:grid; place-items:center; width:96px; height:96px; color:#111; background:#fff; border-radius:50%; font-size:8px; letter-spacing:.13em; opacity:0; transform:translate(-50%,-35%); transition:opacity .3s,transform .3s; }
.category-card:hover .category-card__image img { transform:scale(1.04); filter:brightness(.65); }
.category-card:hover .category-card__image span { opacity:1; transform:translate(-50%,-50%); }
.category-card__meta { display:flex; justify-content:space-between; padding:14px 0 12px; color:rgba(255,255,255,.48); border-bottom:1px solid rgba(255,255,255,.22); font-size:8px; letter-spacing:.13em; }
.category-card h3 { margin:14px 0 2px; font-size:clamp(22px,2.5vw,36px); letter-spacing:-.055em; }
.category-card p { margin:0; color:rgba(255,255,255,.45); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.poster-project h3 { margin-top:16px; font-size:clamp(28px,3.2vw,48px); }
.poster-viewer { position:fixed; z-index:996; inset:0; overflow-y:auto; color:#fff; background:#070707; opacity:0; visibility:hidden; transform:translateY(20px); transition:opacity .4s,visibility .4s,transform .4s; }
.poster-viewer--open { opacity:1; visibility:visible; transform:translateY(0); }
.poster-viewer__bar { position:sticky; z-index:3; top:0; display:flex; align-items:center; justify-content:space-between; padding:18px 26px; background:rgba(7,7,7,.92); border-bottom:1px solid rgba(255,255,255,.14); backdrop-filter:blur(14px); }
.poster-viewer__bar strong,.poster-viewer__close,.poster-viewer__back { font-size:9px; font-weight:400; letter-spacing:.14em; }
.poster-viewer__close { padding:10px 15px; border:1px solid rgba(255,255,255,.35); border-radius:999px; }
.poster-viewer__canvas { width:min(1400px,100%); margin:0 auto; padding:45px 24px 70px; display:flex; flex-direction:column; gap:24px; }
.poster-viewer__canvas img { position:relative; display:block; flex:none; width:100%; height:auto; margin:0 auto; background:#171717; box-shadow:0 24px 70px rgba(0,0,0,.35); }
.poster-viewer__back { display:block; margin:0 auto 50px; padding:14px 20px; border:1px solid rgba(255,255,255,.35); border-radius:999px; }
.services { background:var(--paper); }
.service-list { margin-top:50px; border-top:1px solid var(--ink); }
.service { width:100%; display:grid; grid-template-columns:1fr 3fr 1fr; align-items:center; min-height:140px; border-bottom:1px solid var(--line); text-align:left; transition:padding .35s,background .35s; }
.service:hover,.service--active { padding:0 24px; color:#fff; background:#111; }
.service span,.service p { font-size:9px; letter-spacing:.15em; }
.service h3 { margin:0; font-size:clamp(34px,5vw,72px); letter-spacing:-.07em; }
.service p { text-align:right; }
.contact { width:100%; max-width:none; min-height:90svh; display:flex; flex-direction:column; justify-content:space-between; color:#fff; background:#0c0d12; }
.contact__lead { margin:70px 0 20px; color:rgba(255,255,255,.52); font-size:12px; letter-spacing:.1em; }
.contact__mail { display:block; width:max-content; max-width:100%; margin:auto; font-size:clamp(82px,16vw,240px); font-weight:900; line-height:.74; letter-spacing:-.1em; text-align:center; transition:transform .4s; }
.contact__mail:hover { transform:scale(.97); }
.contact__bottom { display:flex; justify-content:space-between; padding-top:60px; font-size:8px; letter-spacing:.14em; }
[data-reveal] { opacity:0; transform:translateY(42px); transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }
.project-modal { position:fixed; z-index:970; inset:0; overflow-y:auto; color:#fff; background:#090909; opacity:0; visibility:hidden; transform:translateY(30px); transition:opacity .45s,transform .45s,visibility .45s; }
.project-modal--open { opacity:1; visibility:visible; transform:translateY(0); }
@keyframes modal-in { from{opacity:0;transform:translateY(30px)} }
.modal-close { position:fixed; z-index:2; top:24px; right:24px; padding:14px 18px; color:var(--ink); background:#fff; border-radius:999px; font-size:9px; letter-spacing:.14em; }
.modal-layout { min-height:100%; display:grid; grid-template-columns:36% 64%; }
.modal-copy { position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; padding:7vw 5vw; }
.modal-copy>span { color:rgba(255,255,255,.48); font-size:9px; letter-spacing:.15em; }
.modal-copy h2 { margin:26px 0 10px; font-size:clamp(40px,4.2vw,68px); line-height:.94; letter-spacing:-.07em; }
.modal-copy h2 span { display:block; white-space:nowrap; }
.modal-copy h2.modal-title--compact { font-size:clamp(32px,3.3vw,52px); }
.modal-copy p { margin:0; color:rgba(255,255,255,.5); font-size:10px; letter-spacing:.1em; }
.modal-copy strong { width:70px; height:6px; margin:36px 0; }
.modal-copy .modal-description { max-width:400px; font-size:13px; line-height:1.9; letter-spacing:.02em; }
.modal-image { min-height:100svh; display:grid; place-items:center; padding:4.5vw 3.5vw; background:#141414; }
.modal-image img { width:100%; max-height:88svh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.modal-gallery { width:100%; display:grid; gap:28px; align-self:start; }
.modal-gallery img { width:100%; max-height:none; }
@media(max-width:900px){
  .cursor,.desktop-nav{display:none}.menu-trigger{display:block}.site-header{padding:22px 20px}.hero{padding:110px 20px 28px}.hero__title{font-size:clamp(66px,21vw,112px);line-height:.78}.hero__intro{max-width:280px;font-size:11px;line-height:1.7}.hero__foot{right:20px;left:20px}.hero__foot span:nth-child(2){display:none}
  .hero--laptop{min-height:0;padding:0}.hero-stage{width:100%;aspect-ratio:1643/2009}.home-icon--ai{left:24.5%;top:18%;--icon-size:12%}.home-icon--ps{left:67.7%;top:14.5%;--icon-size:11.2%}.home-icon--gpt{left:46.8%;top:23.3%;--icon-size:7.6%}.home-icon--mj{left:25.5%;top:33.4%;--icon-size:7%}.home-icon--c4d{left:36.5%;top:39.3%;--icon-size:6%}.home-icon--codex{left:17.35%;top:43.55%;--icon-size:5.55%}.home-enter{left:42%;top:82.2%;width:16%}.statement{overflow-x:auto}.statement__art{width:1100px;overflow:hidden}.statement__art img{width:1100px;max-width:none}
  .statement__grid,.work,.services,.contact{padding:76px 20px}.statement__grid{display:block}.statement__main{min-height:540px;margin-top:40px}.statement__main h2{font-size:clamp(62px,18vw,100px)}.statement__main h2 span:last-child{margin-left:0}.portrait{right:50%;width:min(76vw,360px);transform:translateX(50%)}.orbit--one{right:50%;width:330px;height:330px;transform:translateX(50%)}.orbit--two{display:none}.statement__copy,.stats{grid-template-columns:1fr;gap:20px;margin-top:40px}.stats{display:grid;grid-template-columns:repeat(3,1fr)}.stats strong{font-size:38px}.stats span{font-size:6px}
  .category-divider{height:3px}.category-divider img{width:calc(100% - 40px)}.category-intro{padding:76px 20px 48px}.category-intro h2,.category-work__head h2{font-size:clamp(54px,17vw,88px)}
  .brand-vi,.ecommerce{padding:76px 20px}.brand-vi{padding-top:18px;padding-bottom:32px}.ecommerce{padding-top:38px}.brand-vi__head,.ecommerce__head{margin-bottom:42px}.brand-vi-feature-grid,.ecommerce-feature-grid{display:block;margin-bottom:70px}.brand-vi-feature,.ecommerce-feature{margin-bottom:38px}.brand-vi-feature h3,.ecommerce-feature h3{font-size:22px}.brand-vi-feature p,.ecommerce-feature p{font-size:6px}.brand-vi-manuals{grid-template-columns:repeat(2,1fr);gap:28px 10px;padding-top:24px}.brand-vi-manual h3{font-size:13px}.brand-vi-viewer__gallery{padding:14px 0 45px;gap:10px}.ecommerce-group{margin-bottom:65px}.ecommerce-group__head{margin-bottom:18px}.ecommerce-grid{grid-template-columns:repeat(2,1fr);gap:28px 10px}.ecommerce-card__preview{height:280px}.ecommerce-card h3{font-size:13px}.ecommerce-viewer__bar,.brand-vi-viewer__bar{padding:14px 12px}.ecommerce-viewer__bar div,.brand-vi-viewer__bar div{gap:8px}.ecommerce-viewer__canvas{padding:18px 0 48px}.ecommerce-viewer__canvas img{width:100%}.ecommerce-viewer__nav,.brand-vi-viewer__nav{padding:18px 14px 26px}
  .section-head{display:flex;align-items:center;margin-bottom:48px;text-align:center}.section-head h2{margin:20px 0 4px;font-size:clamp(58px,17vw,90px)}.section-head>p:last-child{font-size:clamp(6px,1.8vw,9px);white-space:nowrap}.project-grid,.category-work__grid{display:block}.project-card,.project-card--1,.project-card--5,.project-card--2,.category-card,.category-card--1,.category-card--2{display:block;margin:0 0 58px}.poster-project h3{font-size:28px}.poster-viewer__bar{padding:14px 12px}.poster-viewer__canvas{padding:18px 0 45px;gap:10px}.category-work{padding:64px 20px 76px}.category-work__head{margin-bottom:45px}.service{grid-template-columns:44px 1fr;min-height:110px}.service p{display:none}.contact{min-height:78svh}.contact__mail{margin:auto 0;font-size:clamp(66px,21vw,110px);text-align:left}.contact__bottom{flex-wrap:wrap;gap:16px}.modal-layout{display:block}.modal-copy{position:relative;height:auto;min-height:0;padding:88px 20px 30px}.modal-copy h2{font-size:clamp(36px,9.5vw,64px)}.modal-copy h2.modal-title--compact{font-size:clamp(28px,7.4vw,50px)}.modal-copy strong{margin:20px 0}.modal-image{min-height:0;padding:16px 10px 44px}.modal-image img{width:100%;max-height:none}.modal-gallery{gap:10px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}