/* Scroll choreography: native scrolling, no wheel/touch hijacking. */
html{overflow-x:clip;scroll-padding-top:90px}
body{overflow-x:clip}
main,section,.process-head>*{min-width:0}
.motion-word{display:inline-block;background:linear-gradient(90deg,var(--ink) var(--fill,100%),#aaa9a1 var(--fill,100%));background-clip:text;-webkit-background-clip:text;color:transparent}
.intro-copy{opacity:1;transform:none}
.intro-copy .muted{color:inherit}
.hero-title span,.hero-outline span{transform:translateX(var(--hero-shift,0px))}
.hero-title span:last-child,.hero-outline span:last-child{transform:translateX(calc(var(--hero-shift,0px) * -1))}
.hero-photo{transform:translateX(-50%) translateY(var(--portrait-y,0px)) scale(var(--portrait-scale,1));transform-origin:50% 100%}
.hero-kicker,.hero-bottom{animation:hero-enter 1.1s .2s both}
@keyframes hero-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.services{overflow:clip}
.services .section-head{flex-direction:column;align-items:stretch}
.services .section-head p{align-self:flex-end;margin-top:35px}
.service-ticker{overflow:hidden;margin-inline:calc(var(--pad) * -1);padding-block:12px}
.service-ticker-track{display:flex;width:max-content;animation:service-flow 22s linear infinite;transform:translateX(-25%)}
.service-ticker-group{display:flex;flex-shrink:0;align-items:center;gap:4vw;padding-right:4vw;font-size:clamp(64px,12vw,190px);font-weight:900;line-height:.9;letter-spacing:-.075em;white-space:nowrap;text-transform:uppercase}
.service-ticker-group .outline{color:transparent;-webkit-text-stroke:1px #efefe9}
@keyframes service-flow{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.service{border-radius:20px;padding-inline:18px;margin-block:12px;border:1px solid #ffffff30;min-height:180px;transform:translateX(var(--service-x,0px));opacity:1;transition:background .3s,color .3s}
.service-list{border:0}
.pill-art{transform:rotate(var(--pill-angle,-6deg))!important}
.work{position:relative;isolation:isolate;padding-top:100px}
.work-title{position:sticky;top:calc(45svh - 6vw);display:block;z-index:0;pointer-events:none;margin-bottom:12vh}
.work-title h2{font-size:clamp(90px,21vw,330px);text-align:center;line-height:.85}
.work-title p{font-size:14px;margin:26px auto 0;text-align:center;max-width:380px;line-height:1.5}
.project-grid{position:relative;z-index:1;display:flex;flex-direction:column;gap:13vh;padding-block:6vh 14vh}
.project{width:52%;margin:0;align-self:flex-start;opacity:1;transform:translateY(var(--project-y,0px)) rotate(var(--project-rotate,0deg));transition:none}
.project:nth-child(even){align-self:flex-end}
.project:nth-child(3n){width:58%;align-self:center}
.project-media{box-shadow:0 22px 70px #1112;aspect-ratio:1.2;clip-path:inset(var(--project-clip,0%) 0 0 0);border-radius:3px}
.project-caption{background:var(--paper);padding-inline:12px}
.project-media img{filter:none;transform:translateY(var(--image-y,0%));transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.project:hover .project-media img{transform:translateY(-16%)}
.statement{position:relative;padding-inline:var(--pad);min-height:90svh;gap:10px}
.statement-line{font-size:clamp(54px,11.3vw,175px);line-height:.88;white-space:normal;transform:translateX(var(--statement-x,0px))!important}
.statement-line:nth-child(2){text-align:right}
.statement p{margin-top:50px}
.contact-title span{clip-path:inset(0);transform:translateY(var(--contact-y,0px));opacity:var(--contact-opacity,1)}
.contact-title span:nth-child(2){transform:translateY(calc(var(--contact-y,0px) * .65))}
.process-head{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.process-head h2{font-size:clamp(42px,6.2vw,100px);overflow-wrap:anywhere;line-height:.94}
.step{transform:translateY(var(--step-y,0px));opacity:1}
.reveal{transition:opacity .8s,transform .8s cubic-bezier(.22,1,.36,1)}
.cursor,.cursor-dot{opacity:0}
.cursor.pointer-seen,.cursor-dot.pointer-seen{opacity:1}
.mobile-menu:not(.open){visibility:hidden}
.mobile-menu.open{visibility:visible}
@media(max-width:900px){
 .project{width:76%}.project:nth-child(3n){width:82%}
 .service{min-height:140px;padding-inline:12px}
 .process-head{grid-template-columns:minmax(0,1fr)}
 .work-title{top:36svh}.work-title h2{font-size:22vw}
}
@media(max-width:560px){
 .hero-title,.hero-outline{font-size:18.7vw}
 .intro-copy{font-size:clamp(30px,9.3vw,44px);line-height:1.08}
 .service-ticker-group{font-size:20vw;gap:22px;padding-right:22px}
 .services .section-head p{align-self:start;margin-top:24px}
 .service{min-height:125px;border-radius:14px;gap:10px}
 .service h3{font-size:clamp(23px,7.2vw,33px)}
 .work{padding-top:75px}.work-title{top:35svh;margin-bottom:70px}
 .work-title h2{font-size:24vw;letter-spacing:-.085em}
 .work-title p{max-width:270px;font-size:14px;margin-top:18px}
 .project-grid{gap:90px;padding-block:10px 80px}
 .project,.project:nth-child(3n){width:94%}.project:nth-child(3n){align-self:center}
 .project-caption h3{font-size:28px}.project-caption p{font-size:12px}
 .statement{min-height:auto;padding-block:85px;gap:8px}
 .statement-line{font-size:14.3vw;line-height:.98;letter-spacing:-.07em;white-space:nowrap}
 .statement-line:nth-child(2){margin:0}
 .statement p{font-size:19px;line-height:1.5;margin-top:40px}
 .process-head h2{font-size:10.9vw;overflow-wrap:normal;line-height:1}
 .contact-title{font-size:20vw;line-height:.88}
 .contact-top,.footer{overflow-wrap:anywhere}
}
/* Final editorial layout. Cards share a stable grid; only their content reveals. */
.work{padding-block:clamp(80px,10vw,150px)}
.work-title{position:relative;top:auto;display:flex;flex-direction:row;align-items:end;justify-content:space-between;gap:32px;margin:0 0 64px;pointer-events:auto}
.work-title h2{font-size:clamp(72px,13vw,210px);text-align:left;letter-spacing:-.08em;line-height:.85}
.work-title p{max-width:320px;margin:0;text-align:left;font-size:15px}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 32px;padding:0}
.project,.project:nth-child(even),.project:nth-child(3n){grid-column:auto!important;width:100%;min-width:0;margin:0;align-self:start;transform:none}
.project-media{aspect-ratio:1.18;clip-path:none;border-radius:8px;box-shadow:none;background:#e5e5df;isolation:isolate}
.project-media img{height:100%;min-height:0;object-fit:cover;object-position:top;transform:none;filter:none;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.project:hover .project-media img{transform:none}
.project-preview{display:block;height:100%;position:relative}
.project-preview:after{content:'Pogledaj ceo koncept ↗';position:absolute;bottom:16px;left:16px;background:var(--paper);color:var(--ink);padding:12px 16px;border-radius:99px;font-size:12px;font-weight:700;transform:translateY(8px);opacity:0;transition:opacity .3s,transform .4s}
.project-index{width:40px;height:40px;right:14px;top:14px;pointer-events:none}
.project-caption{display:block;padding:20px 0 22px;position:relative}
.project-caption h3{font-size:clamp(25px,2.7vw,42px);line-height:1.06;overflow-wrap:anywhere}
.project-caption p{text-align:left;font-size:11px;line-height:1.6;margin-top:10px;letter-spacing:.12em}
.project-caption:after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s}
.reveal,.reveal.visible{opacity:1;transform:none}
.motion-ready .reveal:not(.visible){opacity:0;transform:translateY(28px)}
.motion-ready .intro-copy:not(.visible){opacity:1;transform:none}
.motion-ready .project:not(.visible){transform:translateY(32px)}
.reveal{transition:opacity .85s var(--delay,0s),transform 1s cubic-bezier(.22,1,.36,1) var(--delay,0s)}
.title-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.title-word{display:inline-block;transform:none;transition:transform 1.05s cubic-bezier(.22,1,.36,1);transition-delay:var(--word-delay,0s)}
.motion-ready .reveal:not(.visible) .title-word{transform:translateY(115%)}
.hero-title,.hero-outline{animation:title-arrive 1.3s cubic-bezier(.22,1,.36,1) both}
@keyframes title-arrive{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.hero-photo{animation:portrait-arrive 1.5s ease both}
@keyframes portrait-arrive{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
.contact-title span{transition:transform .15s linear,opacity .15s linear}
.contact-arrow{transition:transform .35s,background .35s}
.contact-actions a:hover .contact-arrow{transform:rotate(45deg);background:var(--paper)}
.progress{width:100%!important;transform:scaleX(var(--page-progress,0));transform-origin:left}
.step{position:relative;overflow:hidden}
.step:after{content:'';position:absolute;bottom:0;left:0;height:3px;width:100%;background:var(--acid);transform:scaleX(var(--step-progress,0));transform-origin:left}
.service,.service:hover{padding-inline:18px;transform:none}
.statement-line{font-size:clamp(40px,10.8vw,175px)}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.project-preview:focus-visible{outline-offset:-6px;outline-color:var(--acid)}
.project-preview:focus-visible:after{opacity:1;transform:none}
.contact-actions a{min-width:0;gap:16px}
.contact-actions a>span:first-child{min-width:0;overflow-wrap:anywhere}
@media(min-width:901px) and (max-width:1200px){.contact-actions{grid-template-columns:1fr}.contact-actions a{border-right:0;border-bottom:1px solid var(--line)}.contact-actions a:last-child{border-bottom:0}}
.mobile-menu a{transform:translateY(20px);opacity:0;transition:transform .5s,opacity .5s}
.mobile-menu.open a{transform:none;opacity:1;transition-delay:.18s}
.mobile-menu.open a:nth-child(2){transition-delay:.24s}.mobile-menu.open a:nth-child(3){transition-delay:.3s}.mobile-menu.open a:nth-child(4){transition-delay:.36s}
@media(hover:hover) and (pointer:fine){
 .project:hover .project-media img{transform:scale(1.035)}
 .project:hover .project-preview:after{opacity:1;transform:none}
 .project:hover .project-caption:after{transform:scaleX(1)}
}
@media(max-width:900px){
 .work-title{flex-direction:column;align-items:start;gap:25px;margin-bottom:42px}
 .project-grid{gap:48px 24px}
 .project-caption h3{font-size:27px}
 .process-head h2{font-size:clamp(36px,7.5vw,68px);overflow-wrap:normal}
 .service,.service:hover{padding-inline:12px}
}
@media(max-width:640px){
 .project-grid{grid-template-columns:minmax(0,1fr);gap:42px}
 .project,.project:nth-child(even),.project:nth-child(3n){width:100%;margin:0;justify-self:stretch;align-self:start}
 .work-title h2{font-size:22vw}.work-title p{max-width:310px}
 .project-caption{padding:17px 0 20px}.project-caption h3{font-size:28px}
 .project-media{aspect-ratio:1.08;border-radius:6px}
 .project-preview:after{content:'Otvori koncept ↗';opacity:1;transform:none;font-size:10px;padding:9px 12px;bottom:12px;left:12px}
 .statement-line{font-size:13.5vw;letter-spacing:-.07em;white-space:nowrap;transform:none!important}
 .statement p{margin-top:32px;font-size:18px}
 .process-head h2{font-size:10.1vw;line-height:1;overflow-wrap:normal}
 .contact-title{font-size:20vw;margin:65px 0}
 .contact-actions a{padding-inline:0}
}
/* Performance: opaque navigation and compositor-only entrance effects. */
.nav{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;transition:color .2s,background-color .2s}
.nav.dark{background:var(--ink)}
.hero-photo{filter:none;animation:portrait-light 1s ease both}
@keyframes portrait-light{from{opacity:0}to{opacity:1}}
.hero-title,.hero-outline{animation:portrait-light .8s ease both}
.intro-copy .muted{color:var(--ink)}
.project-media{contain:paint}
.step:after{transform:scaleX(0);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.step.visible:after{transform:scaleX(1)}
.contact-title span{transform:none;opacity:1;transition:none}
.service-ticker-track,.marquee-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .project,.service,.step,.statement-line,.contact-title span{transform:none!important;opacity:1!important}
 .project-media{clip-path:none}.motion-word{background:none;color:var(--ink)}
 .hero-photo{transform:translateX(-50%)!important}
 .motion-ready .reveal:not(.visible),.motion-ready .reveal:not(.visible) .title-word{opacity:1;transform:none}
}