/* Main-only layout and motion. Shared shell lives in common.css. */
body.page-main{--section-space:120px;--heading:72px;--heading-line:80px;--intro:16px;--intro-line:24px;--statement-height:1080px;--circle:320px}
html:has(body.page-main){scrollbar-width:none;scroll-behavior:smooth;scroll-padding-top:24px}

body.page-main button:focus-visible,body.page-main a:focus-visible,body.page-main [tabindex]:focus-visible{outline:2px solid var(--mint);outline-offset:5px}

body.page-main .container{width:calc(100% - var(--gutter)*2);max-width:1440px;margin-inline:auto}
body.page-main .section-space{padding-block:var(--section-space)}
body.page-main .section-heading{text-align:center}
body.page-main .section-heading h2{font-family:Inter,Arial,sans-serif;font-size:var(--heading);line-height:var(--heading-line);font-weight:700;letter-spacing:-.02em;color:#fff}
body.page-main .section-heading p{font-size:var(--intro);line-height:var(--intro-line);color:var(--muted);margin-top:8px}
body.page-main .section-heading strong{font-weight:600;color:white}
body.page-main .project-dialog.project-morphing{overflow:visible}
body.page-main .project-dialog.project-morphing>.dialog-media{opacity:0}
body.page-main .project-dialog.project-morphing>:not(.project-morph-image):not(.close-button){pointer-events:none}
body.page-main .project-dialog.project-morphing.project-closing{background:transparent;border-color:transparent;box-shadow:none}
body.page-main .project-dialog.project-morphing.project-closing>:not(.project-morph-image){opacity:0}
body.page-main .project-morph-image{position:fixed;z-index:2;overflow:hidden;background:#000;pointer-events:none}
body.page-main .project-morph-image img{position:absolute;max-width:none;object-fit:fill;transform:none;transition:none}
body.page-main .dialog-media{position:relative}
body.page-main .dialog-media>.project-outgoing{position:absolute;inset:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
body.page-main .project-dialog[open]::backdrop{animation:project-backdrop-in .4s ease-out both}
body.page-main .project-dialog.project-closing::backdrop{animation:project-backdrop-out .42s ease-in both}
}
@keyframes project-backdrop-in{from{background:transparent;backdrop-filter:blur(0)}to{background:#000c;backdrop-filter:blur(8px)}}
@keyframes project-backdrop-out{from{background:#000c;backdrop-filter:blur(8px)}to{background:transparent;backdrop-filter:blur(0)}}
body.page-main .glass-button{
 --glass-fill:rgba(255,255,255,.2);
 --glass-hover:rgba(255,255,255,.3);
 display:inline-flex;align-items:center;justify-content:center;gap:16px;
 position:relative;isolation:isolate;flex-shrink:0;vertical-align:middle;
 border:0;border-radius:999px;padding:12px 32px;
 font-family:Pretendard,'Noto Sans KR','Malgun Gothic',sans-serif;
 font-size:18px;line-height:24px;font-weight:400;letter-spacing:-.01em;
 color:#fff;white-space:nowrap;text-align:center;
 background:var(--glass-fill);
 box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 4px 12px rgba(0,0,0,.16);
 -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
 transition:background-color .18s ease-out,color .65s ease;
}
body.page-main .glass-button::after{
 content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
 background:var(--mint);clip-path:inset(0 100% 0 0);
 transition:clip-path 1s cubic-bezier(.4,0,.2,1);
}
body.page-main .glass-button::before{
 content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.18) 38%,rgba(255,255,255,.04) 62%,rgba(255,255,255,.24));
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;
 opacity:.7;transition:opacity .18s ease-out;
}
body.page-main .glass-outline{--glass-fill:rgba(0,0,0,0);--glass-hover:rgba(0,0,0,.1)}
@media(hover:hover){
body.page-main .glass-button:hover{background:var(--glass-hover);color:#10251f}
body.page-main .glass-button:hover::after{clip-path:inset(0 0 0 0)}
body.page-main .glass-button:hover::before{opacity:.9}
}
body.page-main .glass-button:focus-visible{color:#10251f}
body.page-main .glass-button:focus-visible::after{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){
 body.page-main .glass-button,body.page-main .glass-button::after{transition:none}
}
body.page-main .project-dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:32px;max-width:calc(100% - 32px)}
body.page-main .project-dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}
body.page-main .hero{position:relative;min-height:0;height:100vh;height:100dvh;display:flex;align-items:flex-end;padding-bottom:160px;overflow:hidden}
body.page-main .hero-media,body.page-main .hero-media video,body.page-main .hero-scrim{position:absolute;inset:0;width:100%;height:100%}
body.page-main .hero-media video{object-fit:cover;opacity:1}
body.page-main .hero-scrim{background:linear-gradient(180deg,#0008 0%,#0000 45%,#00000059 70%,#000000d9 100%)}
body.page-main .hero-content{position:relative;z-index:1}
body.page-main .hero-lead{position:relative;width:max-content;max-width:100%;height:40px;font-family:var(--font-sans);font-size:28px;font-weight:400;line-height:40px;letter-spacing:-.04em;white-space:nowrap;text-align:left}
/* Figma Hero: service and suffix share one line box, with an explicit word gap. */
body.page-main .hero h1{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--font-sans);font-size:64px;font-weight:700;line-height:76px;letter-spacing:-.03em;color:var(--text)}
body.page-main .typing-sizer{visibility:hidden}
body.page-main #hero-typing{position:absolute;inset:0}
body.page-main .hero-suffix{flex-shrink:0;white-space:nowrap;font-weight:300;letter-spacing:-.04em}
body.page-main #hero-service{display:inline-block;white-space:nowrap;min-width:0;flex-shrink:0;overflow:hidden}
body.page-main .hero-actions{display:flex;align-items:flex-start;gap:12px;margin-top:24px}
body.page-main .scroll-cue{--mouse-cycle:1.875s;position:absolute;bottom:calc(60px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:16px;width:96px;height:96px;color:#fff}
body.page-main .mouse-stage{position:relative;display:block;width:96px;height:60px}
body.page-main .scroll-cue .mouse{position:absolute;left:32px;top:0;width:32px;height:54px;animation:magic-mouse-nudge var(--mouse-cycle) linear infinite}
body.page-main .mouse-outline{position:absolute;inset:0;border:1.85px solid #fff;border-radius:999px}
body.page-main .mouse-outline-base{opacity:.22;animation:magic-mouse-base var(--mouse-cycle) linear infinite}
body.page-main .mouse-outline-reveal{animation:magic-mouse-wipe var(--mouse-cycle) linear infinite}
body.page-main .mouse-trackball{position:absolute;left:13px;top:11.73px;width:6px;height:6px;transform-origin:0 0;animation:magic-mouse-ball var(--mouse-cycle) linear infinite}
body.page-main .mouse-trackball img{display:block}
body.page-main .scroll-label-stage{display:flex;justify-content:center;width:96px;height:20px}
body.page-main .scroll-label{display:block;font:400 12px/20px Inter,Arial,sans-serif;letter-spacing:4px;white-space:nowrap;animation:magic-mouse-label var(--mouse-cycle) linear infinite}
@keyframes magic-mouse-nudge{
 0%,100%{transform:translateY(0px)}
 20%{transform:translateY(0.92199px)}
 46.66667%{transform:translateY(3.99801px)}
 50%{transform:translateY(4.28452px)}
 63.33333%{transform:translateY(4.89624px)}
 66.66667%{transform:translateY(4.92px)}
 70%{transform:translateY(4.82297px)}
 93.33333%{transform:translateY(0.40177px)}
}
@keyframes magic-mouse-base{
 0%,100%{opacity:0.22}
 20%{opacity:0.22}
 46.66667%{opacity:0.22}
 50%{opacity:0.22}
 63.33333%{opacity:0.22}
 66.66667%{opacity:0.22}
 70%{opacity:0.22}
 93.33333%{opacity:0.9209}
}
@keyframes magic-mouse-wipe{
 0%,100%{clip-path:inset(0px 0 0);opacity:1}
 20%{clip-path:inset(5.89923px 0 0);opacity:1}
 46.66667%{clip-path:inset(48.10077px 0 0);opacity:1}
 50%{clip-path:inset(52.03157px 0 0);opacity:1}
 63.33333%{clip-path:inset(54px 0 0);opacity:0}
 66.66667%{clip-path:inset(54px 0 0);opacity:0}
 70%{clip-path:inset(54px 0 0);opacity:0}
 93.33333%{clip-path:inset(54px 0 0);opacity:0}
}
@keyframes magic-mouse-ball{
 0%,100%{transform:translate(0px,0px) scale(1);opacity:1}
 20%{transform:translate(0.30078px,15.33923px) scale(0.9);opacity:1}
 46.66667%{transform:translate(1.80078px,23.91615px) scale(0.4);opacity:0}
 50%{transform:translate(1.80078px,9.14692px) scale(0.4);opacity:0}
 63.33333%{transform:translate(1.80078px,9.14692px) scale(0.4);opacity:0}
 66.66667%{transform:translate(1.75598px,8.92232px) scale(0.41467);opacity:0.02445}
 70%{transform:translate(1.61719px,8.21546px) scale(0.46085);opacity:0.10142}
 93.33333%{transform:translate(0px,-0.03769px) scale(1);opacity:1}
}
@keyframes magic-mouse-label{
 0%,100%{transform:translateY(0px);opacity:1}
 20%{transform:translateY(0.2305px);opacity:0.86763}
 46.66667%{transform:translateY(0.9995px);opacity:0.40078}
 50%{transform:translateY(1.07113px);opacity:0.35237}
 63.33333%{transform:translateY(1.22406px);opacity:0.23393}
 66.66667%{transform:translateY(1.23px);opacity:0.22341}
 70%{transform:translateY(1.20574px);opacity:0.22}
 93.33333%{transform:translateY(0.10044px);opacity:0.9209}
}
@media(prefers-reduced-motion:reduce){
body.page-main .scroll-cue .mouse,body.page-main .mouse-outline,body.page-main .mouse-trackball,body.page-main .scroll-label{animation:none!important}
}
body.page-main .difference{height:1080px;position:relative;overflow:hidden;background:var(--surface)}
body.page-main .difference-backdrop{position:absolute;inset:0}
body.page-main .difference-backdrop::after{content:"";position:absolute;inset:0 50% 0 0;background:linear-gradient(90deg,transparent,rgba(20,24,22,.12) 65%,#141816)}
body.page-main .difference-backdrop-images{position:absolute;inset:0 50% 0 0;opacity:.15;overflow:hidden}
body.page-main .difference-backdrop-images img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.page-main .difference::after{content:'';position:absolute;inset:auto 0 0;height:320px;background:linear-gradient(0deg,var(--bg),transparent);pointer-events:none}
body.page-main .difference-content{position:relative;z-index:3;pointer-events:none}
body.page-main .difference-heading{padding-top:168px;text-align:left;width:500px}
body.page-main .process-controls{width:500px;margin-top:80px;pointer-events:auto}
body.page-main .process-tabs{display:flex;flex-direction:column;gap:12px}
body.page-main .process-tabs button{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:24px;min-height:132px;border:1px solid #ffffff14;border-radius:8px;background:#141816cc}
body.page-main .process-tabs button[aria-selected=true]{border-color:var(--mint);min-height:188px}
body.page-main .step-number{font:500 13px/20px Inter,Arial,sans-serif;letter-spacing:.1em;color:var(--mint)}
body.page-main .step-title{font-size:22px;line-height:32px;font-weight:500}
body.page-main .step-short{display:none}
body.page-main .step-description{display:none;color:var(--muted);font-size:16px;line-height:26px}
body.page-main .process-tabs button[aria-selected=true] .step-description{display:block}
body.page-main .compact-process-copy{display:none}
body.page-main .workflow-viewport{position:absolute;left:calc(var(--gutter) + 500px);top:240px;right:0;height:800px;overflow:hidden;z-index:2;mask-image:linear-gradient(90deg,transparent,#000 20px)}
body.page-main .workflow-canvas{position:relative;width:3100px;height:800px;transition:transform .75s cubic-bezier(.22,1,.36,1);transform:translate(var(--pan,0px),var(--pan-y,0px))}
body.page-main .workflow-node{position:absolute;padding:6px;background:var(--surface);border:0;box-shadow:inset 0 0 0 1.5px var(--mint);border-radius:18px;overflow:hidden}
body.page-main .workflow-node .node-image{position:relative;width:100%;height:100%;overflow:hidden;border-radius:12px}
body.page-main .workflow-node img{width:100%;height:100%;object-fit:cover}
body.page-main .node-person{left:7px;top:88px;width:322px;height:273px;}
body.page-main .node-product{left:7.5px;top:472px;width:321px;height:273px;}
body.page-main .node-merge{left:507.5px;top:160.5px;width:438px;height:513px}
body.page-main .node-merge img{position:absolute;width:209.08%;left:-13.59%;max-width:none}
body.page-main .node-background{left:1057.5px;top:88.5px;width:321px;height:273px}
body.page-main .node-background img{position:absolute;left:-45.68%;top:-24.36%;width:389.3%;height:306.18%;max-width:none}
body.page-main .node-scene{left:1477.5px;top:402.5px;width:435px;height:249.938px}
body.page-main .node-scene img{object-fit:contain}
body.page-main .node-motion{left:2191px;top:143px;width:858px;height:487.875px;border-radius:30px}
body.page-main .node-motion video{display:block;width:100%;height:100%;object-fit:contain;border-radius:24px}
body.page-main .difference .port-8{display:none}
@media(max-width:1199px){body.page-main .node-motion video{border-radius:10px}}
body.page-main .connector{position:absolute;display:block}
body.page-main .connector img{max-width:none}
body.page-main .connector-1{left:329px;top:223.38px}
body.page-main .connector-2{left:328.5px;top:415.87px}
body.page-main .connector-3{left:945.5px;top:415.87px}
body.page-main .connector-4{left:1378.5px;top:223.87px}
body.page-main .connector-5{left:1912.5px;top:385.81px}
body.page-main .port{position:absolute}
body.page-main .port img{display:block}
body.page-main .marquee{position:relative;height:224px;overflow:hidden;font-family:Inter,Arial,sans-serif;font-size:112px;line-height:128px;font-weight:700;letter-spacing:-.03em}
body.page-main .marquee-layer{position:absolute;inset:0;display:flex;align-items:center}
body.page-main .marquee-track{position:relative;display:flex;flex-shrink:0;width:max-content;animation:marquee 16s linear infinite}
/* 외곽선: 불투명 흰색으로 그린 뒤 SVG 필터(inc/footer.php #text-outline)로 바깥 테두리만 남기고 그 테두리만 투명도 30%(common.css .marquee-text와 같은 방식).
   글자 안은 완전히 투명하고, 겹친 획 선·옆 글자와 교차하는 선이 생기지 않는다. 흰 채움은 위에 겹친 .marquee-highlight 층이 맡는다. */
body.page-main .marquee-track>span{white-space:nowrap;padding-right:64px;color:#fff;filter:url(#text-outline);opacity:.3}
body.page-main .marquee-highlight{clip-path:circle(calc(var(--circle)/2) at 50% 50%)}
body.page-main .marquee-highlight span{color:white;-webkit-text-stroke:0;filter:none;opacity:1}
/* Split letters carry their own outline so scattering is not clipped or repainted as one large phrase. */
body.page-main .marquee.has-marquee-letters .marquee-track>span{filter:none;opacity:1}
body.page-main .marquee.has-marquee-letters .marquee-letter{filter:url(#text-outline);opacity:.3}
body.page-main .marquee.has-marquee-letters .marquee-highlight .marquee-letter{filter:none;opacity:1}
@keyframes marquee{to{transform:translateX(-33.333333%)}}
body.page-main .service-transition-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
@media(min-width:600px) and (prefers-reduced-motion:no-preference){
body.page-main .service-preview{animation:service-preview-drift 8s ease-in-out infinite}
body.page-main .preview-concept{animation-duration:9s;animation-delay:-3s;--preview-drift:5px}
body.page-main .preview-motion{animation-duration:8.5s;animation-delay:-4s;--preview-drift:6px}
body.page-main .preview-prompt{animation-duration:9.5s;animation-delay:-1.5s;--preview-drift:-4px}
body.page-main .service-preview>:is(img,video,canvas){transition:transform .6s cubic-bezier(.22,1,.36,1)}
body.page-main .service-transition-layer .service-preview>:is(img,video,canvas){transition:none}
}
@media(min-width:600px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
body.page-main .service-preview:hover>:is(img,video,canvas){transform:scale(1.035)}
}
@keyframes service-preview-drift{
 0%,100%{transform:translateY(0)}
 50%{transform:translateY(var(--preview-drift,-6px))}
}
body.page-main .service-tabs{display:flex;justify-content:center;gap:32px;margin:32px auto 48px}
body.page-main .service-tabs button{min-width:80px;height:48px;text-align:center;font-size:18px;line-height:24px;font-weight:500;color:var(--muted);border:0;transition:color .35s ease}
body.page-main .service-tabs button[aria-selected=true]{color:var(--mint);border-bottom-color:transparent}
body.page-main .service-tabs button:hover{color:var(--mint)}
body.page-main .service-stage{position:relative;aspect-ratio:1440/784;min-height:450px;transition:opacity .25s}
body.page-main .service-feature,body.page-main .service-rear,body.page-main .service-preview{position:absolute;overflow:hidden;border-radius:16px}
body.page-main .service-feature{transform-origin:top center;left:31.94444%;top:4.08163%;width:36.11111%;height:91.83673%;border:1px solid var(--line);background:var(--raised)}
body.page-main .service-feature>img,body.page-main .service-preview>img,body.page-main .service-rear>img{width:100%;height:100%;object-fit:cover}
body.page-main :is(.service-feature,.service-preview)>:is(video,canvas){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
body.page-main .service-feature::after{content:'';position:absolute;inset:52% 0 0;background:linear-gradient(transparent,#00000061 50%,#000000eb)}
body.page-main .service-copy{position:absolute;inset:auto 0 0;z-index:2;padding:20px 32px 24px;display:flex;flex-direction:column;gap:8px}
body.page-main .service-category{font:600 13px/20px Inter,Arial,sans-serif;color:var(--mint);letter-spacing:.04em}
body.page-main .service-copy h3{font-size:22px;line-height:24px}
body.page-main .service-industries{font-size:14px;line-height:22px;color:#ffffff99}
body.page-main .rear-1{left:33.3333%;top:2.0408%;width:33.3333%;height:91.83673%;opacity:1}
body.page-main .rear-2{left:34.72222%;top:0;width:30.55556%;height:91.83673%;opacity:1}
body.page-main .preview-reference{left:2.77778%;top:calc(5.65306% - 8px);width:20.16666%;height:44.44898%}
body.page-main .preview-concept{left:8.05556%;top:calc(54.84694% + 8px);width:16.46944%;height:36.73214%}
body.page-main .preview-motion{left:77.63889%;top:3.06122%;width:19.58333%;height:42.34694%}
body.page-main .preview-prompt{left:80.13889%;top:57.65306%;width:15.13889%;height:32.90816%}
body.page-main .service-preview span{position:absolute;right:8px;top:8px;background:var(--bg);color:var(--mint);border-radius:8px;padding:4px 12px;font-size:12px;line-height:22px;font-weight:700;letter-spacing:.02em}
body.page-main .brand-statement{height:var(--statement-height);position:relative;background:#000;overflow:hidden}
body.page-main .floating-scene{position:relative;width:100%;height:100%;max-width:2400px;margin-inline:auto}
body.page-main .floating{position:absolute;pointer-events:none}
body.page-main .float-crop{position:absolute;overflow:hidden;border-radius:8px;animation:float 7.3s infinite}
body.page-main .float-1 .float-crop,body.page-main .float-3 .float-crop,body.page-main .float-5 .float-crop,body.page-main .float-6 .float-crop,body.page-main .float-8 .float-crop{animation-name:float-reverse}
body.page-main .floating img{position:absolute;max-width:none;object-fit:cover}
body.page-main .statement-content{position:absolute;left:0;top:44.25926%;width:100%;text-align:center;z-index:2}
body.page-main .statement-text{will-change:transform,opacity}
body.page-main .statement-text h2{font-size:64px;line-height:82px;letter-spacing:-.02em;font-weight:700}
body.page-main .statement-text p{font-size:18px;line-height:30px;color:var(--muted);margin-top:12px}
body.page-main .statement-content .glass-button{margin-top:32px}
@keyframes float{0%,.68493%{transform:translate(0,0);animation-timing-function:ease-in-out}50%,50.68493%{transform:translate(8.34%,20%);animation-timing-function:ease-in-out}100%{transform:translate(0,0)}}
@keyframes float-reverse{0%,.68493%{transform:translate(0,0);animation-timing-function:ease-in-out}50%,50.68493%{transform:translate(-8.34%,-20%);animation-timing-function:ease-in-out}100%{transform:translate(0,0)}}
body.page-main .project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:48px;margin-top:64px}
body.page-main .project-card{display:block;min-width:0}
body.page-main .project-image{display:block;position:relative;overflow:hidden;border-radius:16px;aspect-ratio:704/440;box-shadow:0 16px 40px #0000003d;background:var(--surface)}
body.page-main .project-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
body.page-main .project-card:hover img{transform:scale(1.035)}
body.page-main .project-title{display:block;font-size:24px;line-height:32px;font-weight:600;margin-top:12px}
body.page-main .insights-action{display:flex;justify-content:center;margin-top:64px}
body.page-main .insights{min-height:1544px}
body.page-main .contact{position:relative;overflow:hidden;background:#000;padding-block:120px;min-height:420px}
body.page-main .contact video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
body.page-main .contact-inner{position:relative;text-align:center}
body.page-main .contact p{font-size:24px;line-height:32px;font-weight:300}
body.page-main .contact h2{font-size:48px;line-height:56px;font-weight:700;margin-top:8px}
body.page-main .contact .glass-button{margin-top:36px}
body.page-main .project-dialog{width:min(1100px,calc(100% - 32px));padding:24px}
body.page-main .dialog-media{background:#000;aspect-ratio:16/9;border-radius:8px;overflow:hidden}
body.page-main .dialog-media img,body.page-main .dialog-media video,body.page-main .dialog-media iframe{border:0;width:100%;height:100%;object-fit:contain}
body.page-main .project-dialog h2{font-size:24px;line-height:32px;margin-top:24px}
body.page-main .project-pagination{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:16px;color:var(--muted)}
body.page-main .project-pagination button{height:44px;width:44px;text-align:center;font-size:24px}
body.page-main .legal-dialog{width:560px;padding:64px 32px 32px}
body.page-main .legal-dialog p{margin-block:24px}
body.page-main .legal-dialog>a{color:var(--mint)}
@media(min-width:1200px) and (max-width:1559px){
body.page-main .difference-heading,body.page-main .process-controls{width:400px}
body.page-main .workflow-viewport{left:calc(var(--gutter) + 400px)}
body.page-main .section-heading h2{font-size:64px}
body.page-main .step-title{font-size:20px}
body.page-main .service-copy{padding:20px}
body.page-main .service-copy h3{font-size:18px}
body.page-main .service-industries{font-size:12px}
}
@media(max-width:1199px){
body.page-main{--section-space:80px;--heading:60px;--heading-line:68px;--intro:14px;--intro-line:22px;--statement-height:920px;--circle:240px}
body.page-main .hero{height:1024px;min-height:100svh;max-height:none;padding-bottom:48px}
body.page-main .hero-content{text-align:center}
body.page-main .hero-lead{margin-inline:auto;font-size:24px;line-height:40px}
body.page-main .hero h1{justify-content:center;font-size:60px;line-height:72px}
body.page-main .hero-suffix{font-weight:400;letter-spacing:-.03em}
body.page-main .hero-actions{justify-content:center;margin-top:20px}
body.page-main .hero h1{margin-top:-3px}
body.page-main .scroll-cue{display:none}
body.page-main .difference{height:1109px;padding:80px var(--gutter)}
body.page-main .difference-content{width:100%;max-width:none}
body.page-main .difference-heading{padding-top:0;text-align:center;width:100%}
body.page-main .difference-backdrop-images,body.page-main .difference-backdrop::after{right:0}
body.page-main .process-controls{width:100%;margin-top:40px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
body.page-main .process-tabs{position:relative;flex-direction:row;gap:4px;padding:8px;overflow-x:auto;background:var(--raised);scrollbar-width:none}
body.page-main .process-tabs button,body.page-main .process-tabs button[aria-selected=true]{flex:1 0 100px;display:block;min-height:44px;height:44px;padding:0;border:0;background:transparent;text-align:center}
body.page-main .step-number,body.page-main .step-title,body.page-main .step-description,body.page-main .process-tabs button[aria-selected=true] .step-description{display:none}
body.page-main .step-short{display:block;font-size:14px;line-height:22px}
body.page-main .process-tabs button[aria-selected=true]{background:var(--mint);color:#131a16}
body.page-main .compact-process-copy{display:block;padding:16px;background:#141816cc;border-top:1px solid var(--line)}
body.page-main .compact-process-copy h3{font-size:16px;font-weight:500;line-height:24px;margin-bottom:4px}
body.page-main .compact-process-copy p{font-size:14px;line-height:22px;color:var(--muted);min-height:44px}
body.page-main .workflow-viewport{position:relative;left:auto;top:auto;right:auto;height:620px;margin-top:24px;mask-image:none;touch-action:pan-y pinch-zoom}
body.page-main .workflow-canvas{width:2320px;height:560px;top:32px}
body.page-main .workflow-node{border-radius:16px;padding:6px;border-width:1px}
body.page-main .workflow-node .node-image{border-radius:10px}
body.page-main .node-person{left:40px;top:24px;width:224px;height:220px;border-color:var(--mint)}
body.page-main .node-product{left:40px;top:290px;width:224px;height:220px;border-color:var(--mint)}
body.page-main .node-merge{left:450px;top:36px;width:250px;height:448px}
body.page-main .node-background{left:1478px;top:0;width:224px;height:132px}
body.page-main .node-background img{left:0;top:-28.63%;width:203.45%;height:323.74%}
body.page-main .node-scene{left:1440px;top:236px;width:326px;height:188.625px}
body.page-main .node-motion{left:1940px;top:150px;width:326px;height:188.625px}
body.page-main .connector-1{left:264px;top:133.37px}
body.page-main .connector-2{left:264px;top:259.37px}
body.page-main .connector-3{left:700px;top:259.37px}
body.page-main .connector-4{left:1589.37px;top:132px}
body.page-main .connector-5{left:1766px;top:243.68px}
body.page-main .marquee{height:160px;font-size:80px;line-height:96px}
body.page-main .service-tabs{gap:24px;margin:24px auto 32px}
body.page-main .service-tabs button{font-size:16px;font-weight:600}
body.page-main .service-stage{aspect-ratio:704/524;min-height:0}
body.page-main .service-feature{transform-origin:top center;left:28.69318%;top:4.58015%;width:42.61364%;height:90.64885%}
body.page-main .rear-1{left:30.39773%;top:2.29008%;width:39.20455%;height:90.64885%}
body.page-main .rear-2{left:32.10227%;top:0;width:35.79545%;height:90.64885%}
body.page-main .preview-reference{left:.56818%;top:calc(9.16031% - 8px);width:23.375%;height:38.33206%}
body.page-main .preview-concept{left:5.39773%;top:calc(56.87023% + 8px);width:19.25%;height:31.86642%}
body.page-main .preview-motion{left:77.27273%;top:3.05344%;width:21.59091%;height:35.11450%}
body.page-main .preview-prompt{left:79.82955%;top:58.01527%;width:17.61364%;height:29.00763%}
body.page-main .service-copy{padding:16px;gap:8px}
body.page-main .service-copy h3{font-size:17px;line-height:24px}
body.page-main .service-industries{font-size:12px;line-height:20px}
body.page-main .service-preview span{right:4px;top:4px;padding:2px 6px;font-size:8px;line-height:14px}
body.page-main .statement-content{top:44.78261%}
body.page-main .statement-text h2{font-size:42px;line-height:58px}
body.page-main .statement-text p{font-size:16px;line-height:26px;margin-top:12px}
body.page-main .statement-content .glass-button{margin-top:24px}
body.page-main .project-grid{column-gap:24px;row-gap:48px;margin-top:40px}
body.page-main .project-image{aspect-ratio:auto;height:280px}
body.page-main .project-title{font-size:18px;line-height:26px;margin-top:8px}
body.page-main .insights-action{margin-top:40px}
body.page-main .insights{min-height:1062px}
body.page-main .contact{padding-block:80px;min-height:306px}
body.page-main .contact p{font-size:18px;line-height:26px}
body.page-main .contact h2{font-size:36px;line-height:44px;margin-top:4px}
body.page-main .contact .glass-button{margin-top:24px}
}
@media(max-width:599px){
body.page-main{--heading:44px;--heading-line:52px;--intro:12px;--intro-line:20px;--statement-height:844px;--circle:160px}
body.page-main .hero{height:844px}
body.page-main .hero-lead{font-size:20px;letter-spacing:-.01em}
body.page-main .hero h1{font-size:clamp(30px,10.2564vw,40px);line-height:48px;gap:8px;margin-top:-5px}
body.page-main .hero-actions{margin-top:16px}
body.page-main .glass-button{font-size:16px;line-height:22px;padding:12px 24px}
body.page-main .glass-outline{padding-block:10px}
body.page-main .difference{height:1091px}
body.page-main .process-tabs button{flex:0 0 100px}
body.page-main .process-controls{margin-top:40px}
body.page-main .node-person{width:270px;height:224px}
body.page-main .node-product{width:270px;height:224px}
body.page-main .node-merge{left:520px;width:300px}
body.page-main .connector-1{left:310px;top:135.38px}
body.page-main .connector-2{left:310px;top:259.38px}
body.page-main .connector-3{left:820px;top:259.38px}
body.page-main .marquee{height:112px;font-size:56px;line-height:64px}
body.page-main .service-tabs{gap:0;margin:24px auto 32px}
body.page-main .service-tabs button{min-width:0;flex:1;font-size:16px}
body.page-main .service-stage{aspect-ratio:350/556}
body.page-main .service-preview{display:none}
body.page-main .service-feature{transform-origin:top center;left:0;top:4.31655%;width:100%;height:95.68345%}
body.page-main .rear-1{left:3.42857%;top:2.15827%;width:93.14286%;height:95.68345%}
body.page-main .rear-2{left:6.85714%;top:0;width:86.28571%;height:95.68345%}
body.page-main .service-copy{padding:20px;gap:8px}
body.page-main .service-copy h3{font-size:20px;line-height:24px}
body.page-main .service-industries{font-size:14px;line-height:22px}
body.page-main .statement-content{top:45.97156%}
body.page-main .statement-text h2{font-size:clamp(23px,7.18vw,28px);line-height:40px}
body.page-main .statement-text p{font-size:12px;line-height:20px;width:310px;max-width:calc(100% - 32px);margin:8px auto 0}
body.page-main .statement-content .glass-button{margin-top:24px;padding:10px 32px}
body.page-main .project-grid{grid-template-columns:1fr;row-gap:40px}
body.page-main .project-title{line-height:26px}
body.page-main .insights{min-height:1742px}
body.page-main .insights-action .glass-button{font-size:16px;line-height:22px;padding:12px 24px}
body.page-main .contact{padding-block:80px;min-height:276px}
body.page-main .contact p{font-size:12px;line-height:18px}
body.page-main .contact h2{font-size:24px;line-height:32px;letter-spacing:-.01em}
body.page-main .contact .glass-button{margin-top:16px}
body.page-main .project-dialog{padding:16px}
body.page-main .project-dialog h2{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
html:has(body.page-main){scroll-behavior:auto}
body.page-main *::before,body.page-main *::after{animation:none!important;transition:none!important}
}
@media(prefers-reduced-motion:reduce){
body.page-main .float-crop{translate:0 0}
}
@media(min-width:1200px){
body.page-main .node-person{left:7px;top:88px;width:322px;height:273px}
body.page-main .node-product{left:7.5px;top:472px;width:321px;height:273px}
body.page-main .node-merge{left:507.5px;top:160.5px;width:438px;height:513px}
body.page-main .node-background{left:1057.5px;top:88.5px;width:321px;height:273px}
body.page-main .node-scene{left:1477.5px;top:402.5px;width:435px;height:249.938px}
body.page-main .node-motion{left:2191px;top:143px;width:858px;height:487.875px}
body.page-main .port-0{left:323px;top:218.5px}
body.page-main .port-1{left:322.5px;top:602.5px}
body.page-main .port-2{left:501.5px;top:411px}
body.page-main .port-3{left:939.5px;top:411px}
body.page-main .port-4{left:1372.5px;top:219px}
body.page-main .port-5{left:1471.5px;top:521.47px}
body.page-main .port-6{left:1906.5px;top:521.47px}
body.page-main .port-7{left:2185px;top:380.94px}
body.page-main .port-8{left:3043px;top:380.94px}
}
@media(min-width:600px) and (max-width:1199px){
body.page-main .node-person{left:36px;top:24px;width:224px;height:224px}
body.page-main .node-product{left:36px;top:296px;width:224px;height:224px}
body.page-main .node-merge{left:468px;top:44px;width:340px;height:456px}
body.page-main .node-background{left:936px;top:24px;width:224px;height:220px}
body.page-main .node-scene{left:1256px;top:196px;width:340px;height:196.5px}
body.page-main .node-motion{left:1840px;top:104px;width:620px;height:354px}
body.page-main .port-0{left:257px;top:133px}
body.page-main .port-1{left:257px;top:405px}
body.page-main .port-2{left:465px;top:269px}
body.page-main .port-3{left:805px;top:269px}
body.page-main .port-4{left:1157px;top:131px}
body.page-main .port-5{left:1253px;top:291.25px}
body.page-main .port-6{left:1593px;top:291.25px}
body.page-main .port-7{left:1837px;top:278px}
body.page-main .port-8{left:2457px;top:278px}
}
@media(max-width:599px){
body.page-main .node-person{left:40px;top:24px;width:270px;height:224px}
body.page-main .node-product{left:40px;top:290px;width:270px;height:224px}
body.page-main .node-merge{left:520px;top:36px;width:300px;height:448px}
body.page-main .node-background{left:1478px;top:0px;width:224px;height:132px}
body.page-main .node-scene{left:1440px;top:236px;width:326px;height:188.625px}
body.page-main .node-motion{left:1940px;top:28.9792px;width:326px;height:430.6667px}
body.page-main .node-motion video{object-fit:cover}
body.page-main .port-0{left:307px;top:133px}
body.page-main .port-1{left:307px;top:399px}
body.page-main .port-2{left:517px;top:257px}
body.page-main .port-3{left:817px;top:257px}
body.page-main .port-4{left:1587px;top:129px}
body.page-main .port-5{left:1437px;top:327.31px}
body.page-main .port-6{left:1763px;top:327.31px}
body.page-main .port-7{left:1937px;top:241.31px}
body.page-main .port-8{left:2263px;top:241.31px}
body.page-main .port-9{left:1600px;top:233px}
}
@media(min-width:600px) and (max-width:1199px){
body.page-main .workflow-canvas{width:2500px}
body.page-main .connector-1{left:260px;top:135.37px}
body.page-main .connector-2{left:260px;top:271.37px}
body.page-main .connector-3{left:808px;top:271.37px}
body.page-main .connector-4{left:1160px;top:133.37px}
body.page-main .connector-5{left:1596px;top:280.37px}
body.page-main .node-background img{left:-45.68%;top:-24.36%;width:389.3%;height:306.18%}
}
@media(max-width:599px){
body.page-main .contact h2{margin-top:0}
body.page-main .contact .glass-button{margin-top:20px}
}
body.page-main .port-9{display:none}
@media(max-width:599px){
body.page-main .port-9{display:block}
}
@media(min-width:1200px){
body.page-main .brand-statement{--statement-height:100dvh}
body.page-main .difference,body.page-main .services{height:100vh;height:100dvh;min-height:0}
body.page-main .difference-content{transform:scale(var(--difference-scale,1));transform-origin:top left}
body.page-main .workflow-viewport{left:calc(var(--gutter) + 500px * var(--difference-scale,1));top:22.22222%;height:74.07407%}
/* Only the first process tab keeps the original space beside the controls. */
body.page-main .workflow-viewport[aria-labelledby="process-tab-0"]{left:calc(var(--gutter) + 580px * var(--difference-scale,1))}
body.page-main .workflow-canvas{scale:var(--difference-scale,1);transform-origin:top left}
body.page-main .services{--service-padding:clamp(24px,5dvh,64px);padding-block:var(--service-padding)}
body.page-main .services>.container{height:100%;display:flex;flex-direction:column;align-items:center}
body.page-main .services .section-heading{flex-shrink:0}
body.page-main .services .service-tabs{flex-shrink:0;margin:32px auto}
body.page-main .service-stage{min-height:0;flex-shrink:0;width:min(100%,calc((100dvh - 224px - var(--service-padding) * 2) * 1.83673469));margin-block:auto}
}
@media(min-width:1200px) and (max-width:1559px){
body.page-main .workflow-viewport{left:calc(var(--gutter) + 400px * var(--difference-scale,1))}
body.page-main .workflow-viewport[aria-labelledby="process-tab-0"]{left:calc(var(--gutter) + 440px * var(--difference-scale,1))}
}
body.page-main .page-timeline{--timecode-width:180px;position:fixed;z-index:30;inset:auto 0 0;display:flex;align-items:center;height:calc(44px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);border:1px solid #ffffff14;background:transparent;color:var(--muted)}
body.page-main .timeline-timecode{flex:0 0 var(--timecode-width);height:42px;display:flex;align-items:center;padding-left:16px;overflow:hidden;font:500 13px/20px Inter,Arial,sans-serif;letter-spacing:1.04px;white-space:nowrap;font-variant-numeric:tabular-nums}
body.page-main .timeline-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;flex:1;min-width:0;height:28px;list-style:none;margin:0;padding:0}
body.page-main .timeline-track li{min-width:0}
body.page-main .timeline-track a{display:flex;align-items:center;height:28px;padding-left:8px;overflow:hidden;font:500 10px/14px Inter,Arial,sans-serif;letter-spacing:1.2px;white-space:nowrap}
body.page-main .timeline-track a[aria-current=location]{background:rgba(94,234,212,.14);color:var(--mint)}
body.page-main .timeline-track a:hover{background:rgba(94,234,212,.08);color:var(--mint)}
body.page-main .timeline-track a:focus-visible{outline-offset:-2px}
body.page-main .timeline-playhead{position:absolute;top:-1px;left:var(--playhead-x,180px);width:1px;height:44px;background:var(--mint);pointer-events:none}
body.page-main .timeline-playhead img{position:absolute;top:0;left:-3.5px;max-width:none}
body.page-main .page-timeline[hidden]{display:none}
body.page-main body.modal-open .page-timeline{visibility:hidden}
html:has(body.page-main){scroll-padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
body.page-main{padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
@media(max-width:599px){
body.page-main .page-timeline{--timecode-width:108px}
body.page-main .timeline-timecode{padding-left:8px;font-size:10px;letter-spacing:.3px}
body.page-main .timeline-track a{justify-content:center;padding-left:0;letter-spacing:0}
}
@media(max-width:599px){
body.page-main .service-tabs button{font-weight:500}
body.page-main .contact .glass-button{margin-top:20px}
}
body.page-main .process-tabs button{transition:background-color .5s ease,color .5s ease,border-color .5s ease}
@media(min-width:1200px){
body.page-main .process-tabs button{position:relative;gap:0;justify-content:flex-start;height:132px;min-height:0;padding:30px 24px;overflow:hidden;transition:height .6s cubic-bezier(.4,0,.2,1),background-color .5s ease,color .5s ease,border-color .5s ease}
body.page-main .process-tabs button[aria-selected=true]{height:188px;min-height:0}
body.page-main .process-tabs .step-number,body.page-main .process-tabs .step-title{flex-shrink:0}
body.page-main .process-tabs .step-title{margin-top:12px}
body.page-main .process-tabs button .step-description{display:block;position:absolute;top:106px;left:24px;right:24px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .4s ease,transform .6s cubic-bezier(.4,0,.2,1),visibility .6s}
body.page-main .process-tabs button[aria-selected=true] .step-description{opacity:1;visibility:visible;transform:translateY(0)}
}
body.page-main .workflow-node{z-index:2}
body.page-main .port{z-index:3;pointer-events:none}
body.page-main .service-feature.service-receding::after{animation:service-recede-shade var(--service-recede-duration,.6s) ease forwards}
@keyframes service-recede-shade{from{opacity:1}to{opacity:0}}
body.page-main .service-rear{background:var(--raised)}
body.page-main .rear-1>img{filter:brightness(.65)}
body.page-main .rear-2>img{filter:brightness(.38)}
body.page-main .floating-scene{container-type:size}
body.page-main .float-0{left:65.83333%;top:72.03704%;width:min(248px,12.91666667cqw,22.96296296cqh);height:auto;aspect-ratio:248/266;opacity:0.92}
body.page-main .float-0 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-0 img{left:-62.5%;top:0;width:190.68%;height:100%}
body.page-main .float-1{left:78.12500%;top:40.55556%;width:min(184px,9.58333333cqw,17.03703704cqh);height:auto;aspect-ratio:184/244;opacity:0.76}
body.page-main .float-1 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-1 img{left:-74.95%;top:0;width:235.75%;height:100%}
body.page-main .float-2{left:69.58333%;top:6.66667%;width:min(232px,12.08333333cqw,21.48148148cqh);height:auto;aspect-ratio:232/294;opacity:0.92}
body.page-main .float-2 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-2 img{left:-103.2%;top:0;width:225.29%;height:100%}
body.page-main .float-3{left:23.54167%;top:73.51852%;width:min(224px,11.66666667cqw,20.74074074cqh);height:auto;aspect-ratio:224/248;opacity:0.9}
body.page-main .float-3 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-3 img{left:-40.54%;top:0;width:196.83%;height:100%}
body.page-main .float-4{left:12.70833%;top:41.11111%;width:min(196px,10.20833333cqw,18.14814815cqh);height:auto;aspect-ratio:196/246;opacity:0.8}
body.page-main .float-4 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-4 img{left:-77.18%;top:0;width:223.13%;height:100%}
body.page-main .float-5{left:18.75000%;top:9.62963%;width:min(208px,10.83333333cqw,19.25925926cqh);height:auto;aspect-ratio:208/268;opacity:0.94}
body.page-main .float-5 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-5 img{left:-75.98%;top:0;width:229.06%;height:100%}
body.page-main .float-6{left:42.18750%;top:6.11111%;width:min(148px,7.70833333cqw,13.7037037cqh);height:auto;aspect-ratio:148/192;opacity:0.46}
body.page-main .float-6 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-6 img{left:-3.73%;top:0;width:107.47%;height:100%}
body.page-main .float-7{left:4.79167%;top:15.00000%;width:min(154px,8.02083333cqw,14.25925926cqh);height:auto;aspect-ratio:154/108;opacity:0.32}
body.page-main .float-7 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-7 img{left:-29.44%;top:-24.36%;width:323.22%;height:306.18%}
body.page-main .float-8{left:46.97917%;top:71.29630%;width:min(176px,9.16666667cqw,16.2962963cqh);height:auto;aspect-ratio:176/204;opacity:0.62}
body.page-main .float-8 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-8 img{left:-47.35%;top:0;width:207.13%;height:100%}
body.page-main .float-9{left:89.58333%;top:66.66667%;width:min(128px,6.66666667cqw,11.85185185cqh);height:auto;aspect-ratio:128/174;opacity:0.38}
body.page-main .float-9 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-9 img{left:-70.84%;top:0;width:241.69%;height:100%}
@media (max-width:1199px){
body.page-main .float-0{left:61.45833%;top:74.56522%;width:min(176px,22.91666667cqw,19.13043478cqh);height:auto;aspect-ratio:176/186;opacity:0.86}
body.page-main .float-0 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-0 img{left:-60.85%;top:0;width:187.88%;height:100%}
body.page-main .float-1{left:86.19792%;top:41.30435%;width:min(96px,12.5cqw,10.43478261cqh);height:auto;aspect-ratio:96/128;opacity:0.54}
body.page-main .float-1 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-1 img{left:-75.63%;top:0;width:237.04%;height:100%}
body.page-main .float-2{left:67.70833%;top:5.21739%;width:min(156px,20.3125cqw,16.95652174cqh);height:auto;aspect-ratio:156/202;opacity:0.92}
body.page-main .float-2 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-2 img{left:-106.54%;top:0;width:230.2%;height:100%}
body.page-main .float-3{left:15.62500%;top:70.65217%;width:min(156px,20.3125cqw,16.95652174cqh);height:auto;aspect-ratio:156/196;opacity:0.86}
body.page-main .float-3 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-3 img{left:-52.75%;top:0;width:223.36%;height:100%}
body.page-main .float-4{left:1.56250%;top:36.95652%;width:min(96px,12.5cqw,10.43478261cqh);height:auto;aspect-ratio:96/132;opacity:0.6}
body.page-main .float-4 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-4 img{left:-89.33%;top:0;width:244.44%;height:100%}
body.page-main .float-5{left:9.63542%;top:8.69565%;width:min(136px,17.70833333cqw,14.7826087cqh);height:auto;aspect-ratio:136/178;opacity:0.94}
body.page-main .float-5 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-5 img{left:-77.97%;top:0;width:232.68%;height:100%}
body.page-main .float-6{left:42.18750%;top:25.00000%;width:min(88px,11.45833333cqw,9.56521739cqh);height:auto;aspect-ratio:88/116;opacity:0.42}
body.page-main .float-6 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-6 img{left:-4.6%;top:0;width:109.2%;height:100%}
body.page-main .float-7{left:39.06250%;top:4.56522%;width:min(128px,16.66666667cqw,13.91304348cqh);height:auto;aspect-ratio:128/78;opacity:0.28}
body.page-main .float-7 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-7 img{left:-19.02%;top:-24.36%;width:280.85%;height:306.18%}
body.page-main .float-8{left:40.62500%;top:71.08696%;width:min(112px,14.58333333cqw,12.17391304cqh);height:auto;aspect-ratio:112/148;opacity:0.56}
body.page-main .float-8 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-8 img{left:-60.99%;top:0;width:236.14%;height:100%}
body.page-main .float-9{left:80.72917%;top:59.78261%;width:min(92px,11.97916667cqw,10cqh);height:auto;aspect-ratio:92/116;opacity:0.34}
body.page-main .float-9 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-9 img{left:-62.09%;top:0;width:224.17%;height:100%}
}
@media (max-width:599px){
body.page-main .float-0{left:62.05128%;top:79.85782%;width:min(112px,28.71794872cqw,13.27014218cqh);height:auto;aspect-ratio:112/124;opacity:0.86}
body.page-main .float-0 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-0 img{left:-66.13%;top:0;width:196.83%;height:100%}
body.page-main .float-1{left:89.23077%;top:61.61137%;width:min(80px,20.51282051cqw,9.47867299cqh);height:auto;aspect-ratio:80/106;opacity:0.42}
body.page-main .float-1 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-1 img{left:-74.84%;top:0;width:235.56%;height:100%}
body.page-main .float-2{left:64.61538%;top:7.58294%;width:min(112px,28.71794872cqw,13.27014218cqh);height:auto;aspect-ratio:112/148;opacity:0.92}
body.page-main .float-2 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-2 img{left:-109.75%;top:0;width:234.92%;height:100%}
body.page-main .float-3{left:12.30769%;top:74.88152%;width:min(108px,27.69230769cqw,12.79620853cqh);height:auto;aspect-ratio:108/144;opacity:0.86}
body.page-main .float-3 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-3 img{left:-59.04%;top:0;width:237.04%;height:100%}
body.page-main .float-4{left:-7.17949%;top:26.54028%;width:min(82px,21.02564103cqw,9.71563981cqh);height:auto;aspect-ratio:82/104;opacity:0.42}
body.page-main .float-4 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-4 img{left:-78.52%;top:0;width:225.47%;height:100%}
body.page-main .float-5{left:8.20513%;top:5.68720%;width:min(92px,23.58974359cqw,10.90047393cqh);height:auto;aspect-ratio:92/126;opacity:0.94}
body.page-main .float-5 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-5 img{left:-83.91%;top:0;width:243.48%;height:100%}
body.page-main .float-6{left:42.05128%;top:26.54028%;width:min(66px,16.92307692cqw,7.81990521cqh);height:auto;aspect-ratio:66/90;opacity:0.38}
body.page-main .float-6 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-6 img{left:-6.48%;top:0;width:112.96%;height:100%}
body.page-main .float-7{left:36.92308%;top:4.26540%;width:min(84px,21.53846154cqw,9.95260664cqh);height:auto;aspect-ratio:84/54;opacity:0.24}
body.page-main .float-7 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-7 img{left:-22.82%;top:-24.36%;width:296.29%;height:306.18%}
body.page-main .float-8{left:28.20513%;top:66.11374%;width:min(82px,21.02564103cqw,9.71563981cqh);height:auto;aspect-ratio:82/96;opacity:0.5}
body.page-main .float-8 .float-crop{inset:10% -4.17% -10% 4.17%}
body.page-main .float-8 img{left:-48.33%;top:0;width:209.21%;height:100%}
body.page-main .float-9{left:68.20513%;top:65.16588%;width:min(56px,14.35897436cqw,6.63507109cqh);height:auto;aspect-ratio:56/82;opacity:0.3}
body.page-main .float-9 .float-crop{inset:-10% 4.17% 10% -4.17%}
body.page-main .float-9 img{left:-80.17%;top:0;width:260.34%;height:100%}
}
/* Service artwork uses its own portrait framing, rather than the old wide-image crops. */
body.page-main .floating.float-service-image img{inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
body.page-main .brand-pointer-light{position:absolute;left:0;top:0;width:640px;height:640px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,#5eead41a 0%,#5eead40c 32%,transparent 68%);opacity:0;transition:opacity .5s ease;will-change:translate,opacity}
body.page-main .brand-pointer-light.is-active{opacity:1}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
body.page-main .brand-pointer-light{display:none}
}

body.page-main .site-header{position:fixed;inset:0 0 auto;z-index:40}
body.page-main #main .marquee{padding:0;border:0}
body.page-main #main .glass-button:hover{transform:none}

body.page-main .project-dialog>.close-button{z-index:3;font-size:36px;line-height:1;color:#fff;background:rgba(8,10,9,.8);pointer-events:auto}
body.page-main .project-dialog>.close-button:hover{background:rgba(8,10,9,.95)}

/* First-visit studio intro: an editing monitor and a moving timeline. */
body.page-main .studio-intro{display:none}
html.intro-pending,html.intro-pending body{overflow:hidden!important;overscroll-behavior:none}
html.intro-pending body.page-main .studio-intro{display:flex}
body.page-main .studio-intro{--intro-progress:0;--pointer-x:50%;--pointer-y:44%;position:fixed;inset:0;z-index:10000;flex-direction:column;justify-content:space-between;padding:36px 48px;background:radial-gradient(ellipse at var(--pointer-x) var(--pointer-y),#15342b 0%,#0a1210 38%,#080a09 72%);color:#f3f5f1;isolation:isolate;touch-action:none;transition:opacity .85s ease,transform 1s cubic-bezier(.22,1,.36,1);overflow:hidden}
body.page-main .studio-intro::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#5eead408 1px,transparent 1px),linear-gradient(90deg,#5eead408 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse,#000,transparent 75%);pointer-events:none}
body.page-main .studio-intro.is-leaving{opacity:0;transform:scale(1.035);pointer-events:none}
body.page-main .intro-top,body.page-main .intro-meta,body.page-main .intro-controls{display:flex;justify-content:space-between;align-items:center;gap:20px}
body.page-main .intro-top{font:600 12px/1.5 Inter,sans-serif;letter-spacing:.14em}
body.page-main .intro-live{color:var(--mint);font:10px/1.5 monospace;letter-spacing:.1em}
body.page-main .intro-live::before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;background:var(--mint);border-radius:50%;box-shadow:0 0 12px #5eead499}
body.page-main .intro-composition{position:relative;align-self:center;text-align:center;width:min(760px,90%);padding:48px 20px;transform:translate(var(--tilt-x,0px),var(--tilt-y,0px));transition:transform .5s ease-out}
body.page-main .intro-eyebrow{color:var(--mint);font:11px/1.5 monospace;letter-spacing:.28em;margin-bottom:22px}
body.page-main .intro-composition h2{position:relative;font:650 clamp(56px,8vw,112px)/.93 Inter,sans-serif;letter-spacing:-.065em;margin:0}
body.page-main .intro-composition h2 span{color:var(--mint)}
body.page-main .intro-caption{font-size:14px;letter-spacing:.08em;color:#a4ada6;margin-top:26px}
body.page-main .intro-frame{position:absolute;inset:0;pointer-events:none}
body.page-main .intro-frame i{position:absolute;width:20px;height:20px;border:1px solid #5eead470}
body.page-main .intro-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
body.page-main .intro-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
body.page-main .intro-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
body.page-main .intro-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
body.page-main .intro-orbit{position:absolute;width:clamp(220px,28vw,390px);aspect-ratio:1;border:1px solid #5eead416;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
body.page-main .intro-cross{position:absolute;right:-5px;top:50%;color:#5eead460;font:18px monospace}
body.page-main .intro-bottom{width:min(760px,100%);align-self:center}
body.page-main .intro-meta{font:10px/1.5 monospace;letter-spacing:.14em;color:#a4ada6;margin-bottom:12px}
body.page-main .intro-timecode{font-variant-numeric:tabular-nums;color:var(--mint)}
body.page-main .intro-timeline{height:28px;position:relative;border-block:1px solid #5eead433;background:repeating-linear-gradient(90deg,#5eead422 0 1px,transparent 1px 16px)}
body.page-main .intro-track{position:absolute;inset:4px 0;background:linear-gradient(90deg,#5eead414,#5eead466);transform:scaleX(var(--intro-progress));transform-origin:left}
body.page-main .intro-head{position:absolute;left:calc(var(--intro-progress)*100%);top:-4px;bottom:-4px;width:1px;background:var(--mint);box-shadow:0 0 12px #5eead499}
body.page-main .intro-head::before{content:"";position:absolute;left:-3px;top:0;width:7px;height:5px;background:var(--mint);clip-path:polygon(0 0,100% 0,50% 100%)}
body.page-main .intro-controls{margin-top:16px;font-size:11px;color:#a4ada6}
@media(prefers-reduced-motion:no-preference){body.page-main .intro-composition h2,body.page-main .intro-eyebrow,body.page-main .intro-caption{animation:studio-intro-enter 1.25s cubic-bezier(.22,1,.36,1) both}body.page-main .intro-caption{animation-delay:.15s}}
@keyframes studio-intro-enter{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(max-width:599px){body.page-main .studio-intro{padding:24px 20px}body.page-main .intro-top{font-size:10px}body.page-main .intro-live{font-size:8px;letter-spacing:0}body.page-main .intro-composition{width:100%;padding:40px 12px}body.page-main .intro-caption{font-size:12px}body.page-main .intro-controls{font-size:10px}}
@media(max-height:580px){body.page-main .studio-intro{padding:18px 24px}body.page-main .intro-composition{padding:12px}body.page-main .intro-composition h2{font-size:52px}body.page-main .intro-eyebrow{margin-bottom:10px}body.page-main .intro-caption{margin-top:12px}}
@media(prefers-reduced-motion:reduce){body.page-main .studio-intro{transition:opacity .15s;transform:none}body.page-main .intro-composition{transition:none}}

/* Scroll zoom composes with hover and remains readable by the popup morph. */
body.page-main .insights .project-image img{transform:scale(var(--insight-zoom,1))}
body.page-main .insights .project-card:hover img{transform:scale(calc(var(--insight-zoom,1) + .035))}
@media(prefers-reduced-motion:reduce){body.page-main .insights .project-image img,body.page-main .insights .project-card:hover img{transform:none;transition:none}}

/* One shared underline follows the selected service without moving the tabs. */
body.page-main .service-tabs{position:relative}
body.page-main .service-tab-underline{position:absolute;left:0;bottom:0;height:2px;background:var(--mint);border-radius:2px;pointer-events:none}
/* Individual transforms compose with card transitions and the side-image drift. */
body.page-main .services .service-preview,body.page-main .services .service-rear,body.page-main .services .service-feature{translate:calc(var(--service-scatter-x,0px) * var(--service-unsettled,0)) calc(var(--service-scatter-y,0px) * var(--service-unsettled,0));rotate:calc(var(--service-scatter-angle,0deg) * var(--service-unsettled,0))}
body.page-main .services .preview-reference{--service-scatter-x:clamp(-96px,-6vw,-30px);--service-scatter-y:80px;--service-scatter-angle:-10deg}
body.page-main .services .preview-concept{--service-scatter-x:clamp(24px,4.5vw,72px);--service-scatter-y:-54px;--service-scatter-angle:9deg}
body.page-main .services .preview-motion{--service-scatter-x:clamp(30px,6vw,96px);--service-scatter-y:64px;--service-scatter-angle:11deg}
body.page-main .services .preview-prompt{--service-scatter-x:clamp(-66px,-4.5vw,-24px);--service-scatter-y:-42px;--service-scatter-angle:-9deg}
body.page-main .services .rear-2{--service-scatter-x:clamp(18px,4.5vw,69px);--service-scatter-y:-48px;--service-scatter-angle:10deg}
body.page-main .services .rear-1{--service-scatter-x:clamp(-48px,-3vw,-12px);--service-scatter-y:36px;--service-scatter-angle:-7deg}
body.page-main .services .service-feature{--service-scatter-x:clamp(9px,1.5vw,24px);--service-scatter-y:72px;--service-scatter-angle:4.5deg}
@media(prefers-reduced-motion:reduce){body.page-main .services{--service-unsettled:0!important}}

/* Each glyph keeps its original fill/stroke while moving independently. */
body.page-main .marquee-track .marquee-letter{display:inline-block;padding:0;white-space:pre;transform-origin:50% 55%;color:inherit;-webkit-text-stroke:inherit}

/* SVG strokes draw the same mint border without changing card dimensions. */
body.page-main .difference .workflow-node.has-scroll-border{box-shadow:none}
body.page-main .difference .workflow-node.has-scroll-border::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(110deg,transparent 20%,rgba(163,255,217,.08) 38%,rgba(205,255,234,.65) 50%,rgba(163,255,217,.08) 62%,transparent 80%);opacity:var(--assembly-light,0);transform:translateX(var(--assembly-sweep,-140%))}
body.page-main .difference .workflow-scroll-border{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
body.page-main .difference .workflow-scroll-border rect{fill:none;stroke:var(--mint);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}

body.page-main .motion-paused :is(.marquee-track,.service-preview,.float-crop,.scroll-cue .mouse,.mouse-outline-base,.mouse-outline-reveal,.mouse-trackball,.scroll-label){animation-play-state:paused!important}
/* The CRT layer is decorative and removed after the first entrance. */
body.page-main .contact.crt-ready video{clip-path:inset(50% 50%)}
body.page-main .contact.crt-ready .contact-inner > *{opacity:0}
body.page-main .contact-crt-light{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transform-origin:center;background:#eafff8;box-shadow:0 0 20px 5px #baffeb80}
body.page-main .contact-crt-scanlines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,#0009 0 1px,transparent 1px 4px);box-shadow:inset 0 0 70px 15px #0008}
body.page-main .contact.crt-ready .contact-inner{z-index:2}
@media(prefers-reduced-motion:reduce){
 body.page-main .contact.crt-ready video{clip-path:none}
 body.page-main .contact.crt-ready .contact-inner > *{opacity:1}
 body.page-main .contact-crt-light,body.page-main .contact-crt-scanlines{display:none}
}

body.page-main .floating-scene .float-crop{pointer-events:auto;cursor:pointer;transition:scale .45s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
body.page-main .floating-scene .float-crop img{transition:filter .35s ease}
body.page-main .floating-scene .floating{transition:opacity .35s ease}
body.page-main .floating-scene .statement-content{pointer-events:none}
body.page-main .floating-scene .statement-content .glass-button{pointer-events:auto}
@media(hover:hover) and (pointer:fine){
 body.page-main .floating-scene .floating:has(.float-crop:hover){opacity:1}
 body.page-main .floating-scene .float-crop:hover{scale:1.055;box-shadow:0 0 0 1px #baffdf99,0 10px 28px #5eead42b}
 body.page-main .floating-scene .float-crop:hover img{filter:brightness(1.14)}
}
@media(prefers-reduced-motion:reduce){
 body.page-main .floating-scene .float-crop,body.page-main .floating-scene .float-crop img{transition:none}
 body.page-main .floating-scene .float-crop:hover{scale:1}
}
body.page-main .brand-camera-flash{position:absolute;inset:0;z-index:4;background:#fff;opacity:0;pointer-events:none}
body.page-main .brand-camera-bloom{position:absolute;width:clamp(220px,32vw,480px);aspect-ratio:1;translate:-50% -50%;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff9 0%,#fff4 10%,#eafff51a 30%,transparent 65%)}

body.page-main .brand-polaroid{position:absolute;aspect-ratio:1/1.23;translate:-50% -50%;z-index:3;pointer-events:none;margin:0;padding:8px 8px 27px;background:#f5f3ec;border:1px solid #fff9;box-shadow:0 7px 22px #0006;transform-origin:center;box-sizing:border-box}
body.page-main .brand-polaroid img{display:block;width:100%;height:100%;object-fit:cover;background:#151917}
body.page-main .brand-polaroid figcaption{position:absolute;bottom:9px;left:0;width:100%;text-align:center;font:600 clamp(6px,.6vw,9px)/1 Inter,Arial,sans-serif;letter-spacing:.08em;color:#424941;white-space:nowrap}
@media(max-width:599px){body.page-main .brand-polaroid{padding:6px 6px 23px}}


/* Shared atmosphere layout for services, brand and insights. */
body.page-main :is(#services,#studio,#insights){position:relative;isolation:isolate;background:var(--bg)}
/* Fade only the atmosphere into the shared base color at the section seam. */
body.page-main #services > .section-atmosphere{mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - clamp(96px,18vh,180px)),transparent 100%)}
body.page-main #studio > .section-atmosphere{mask-image:linear-gradient(to bottom,transparent 0%,#000 clamp(96px,18vh,180px),#000 calc(100% - clamp(96px,18vh,180px)),transparent 100%)}
body.page-main #insights > .section-atmosphere{mask-image:linear-gradient(to bottom,transparent 0%,#000 clamp(96px,18vh,180px),#000 100%)}
body.page-main #services > .container,body.page-main #studio > .floating-scene,body.page-main #insights > .container{position:relative;z-index:1}
body.page-main #studio .brand-pointer-light{display:none}
body.page-main .motion-paused .section-atmosphere::before,body.page-main .motion-paused .section-atmosphere::after{animation-play-state:paused}