/* Quiet line icons and reference motion. Native scrolling remains intact. */
html{scrollbar-gutter:stable}
html[data-theme=dark]{color-scheme:dark}html[data-theme=light]{color-scheme:light}
#servicii .service-row{grid-template-columns:28px minmax(0,1fr) 56px 22px;gap:24px;min-height:172px;padding:30px 0}
#servicii .service-art{width:56px;height:56px;background:none;color:var(--cream);opacity:.68}
#servicii .service-art svg{display:block;width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1)}
#servicii .service-row:hover .service-art,#servicii .service-row:focus-visible .service-art{opacity:1}
#servicii .service-row:hover svg{transform:translateY(-2px)}
#servicii .service-row h3{font-size:clamp(28px,2.5vw,42px);transition:color .3s}
#servicii .service-row p{max-width:510px;margin-top:12px}
#servicii .service-row>span:last-child{font-size:22px;opacity:.65}
.menu-panel{width:min(560px,100%);padding:38px 46px;overflow-y:auto;overscroll-behavior:contain}
.menu-panel[open]{animation:menu-in .55s cubic-bezier(.16,1,.3,1) both}
.menu-panel[open]::backdrop{animation:backdrop-in .4s both}
.menu-panel.closing{animation:menu-out .22s ease-in both}
.menu-panel.closing::backdrop{animation:backdrop-out .22s both}
.menu-panel nav{gap:0;margin:50px 0 38px;font-size:36px;line-height:1.1}
.menu-panel nav a{display:grid;grid-template-columns:22px 1fr 24px;gap:14px;padding:23px 0;border-bottom:1px solid var(--line);align-items:center}
.menu-panel[open]:not(.closing) nav a{animation:menu-link-in .65s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--menu-delay)}
.menu-index{font-size:10px;color:var(--muted);letter-spacing:0}
.menu-title{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.menu-panel nav a:hover .menu-title{transform:translateX(6px)}
.menu-panel nav a>.menu-arrow{font-size:24px;color:var(--muted);transition:transform .3s}
.menu-panel nav a:hover>.menu-arrow{transform:translate(2px,-2px)}
.menu-contact{border-top:0;padding-top:0;font-size:16px}
.nav-roll{display:block;height:1.55em;overflow:hidden}
.nav-roll>span{display:block;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.desktop-nav a:hover .nav-roll>span,.desktop-nav a:focus-visible .nav-roll>span{transform:translateY(-100%)}
.motion-ready [data-reveal]{transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-reveal]:not(.revealed){transform:translateY(24px)}
.motion-ready h2[data-reveal]{opacity:1;transform:none}
.reveal-word{display:inline-block;transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .45s;transition-delay:var(--word-delay,0ms)}
.motion-ready h2:not(.revealed) .reveal-word{opacity:0;transform:translateY(.6em)}
.intro-heading .reveal-word{opacity:var(--word-opacity,1)}
.intro-heading h2>.reveal-word{color:inherit}
.motion-ready .masthead,.motion-ready .hero-left,.motion-ready .hero-right{animation:copy-in .9s both}
.motion-ready .hero-left{animation-delay:.12s}.motion-ready .hero-right{animation-delay:.22s}
.motion-ready .hero-word{animation:title-in 1.1s cubic-bezier(.16,1,.3,1) .1s both}
.motion-ready.cluj-secondary .s-hero{animation:copy-in .9s .12s both}
.hero-media img,.hero-media video,.hero-base-frame,.hero-cutout,.hero-cutout-poster{transform:translateY(var(--hero-shift,0px));will-change:auto}
.hero-media .hero-base-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);opacity:0;pointer-events:none}
@media(min-width:801px){.hero-media .hero-base-frame.has-frame{opacity:1}.hero-media:has(.hero-base-frame.has-frame) .hero-video,.hero-media:has(.hero-base-frame.has-frame)>img{opacity:0}}
@media(max-width:800px){.hero-base-frame{display:none}.hero-media:has(.hero-video.has-frame)>img{opacity:0}}
.hero-left,.hero-right{transform:translateY(var(--copy-shift,0px))}
.hero-word{transform:translateY(var(--title-shift,0px))}
.pill,.cluj-secondary .s-button{transform:translate(var(--magnet-x,0px),var(--magnet-y,0px));transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s}
.pill:hover,.cluj-secondary .s-button:hover{transform:translate(var(--magnet-x,0px),calc(var(--magnet-y,0px) - 2px))}
.s-project-image{display:block;overflow:hidden;border-radius:15px}
:is(.project-image,.s-project-image) img{transform:translateY(var(--image-shift,0px)) scale(1.04);transition:transform .65s cubic-bezier(.16,1,.3,1)}
:is(.project-image,.s-project-image):hover img{transform:translateY(var(--image-shift,0px)) scale(1.07)}
.project-image>span{transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s}
.project-image:hover>span{transform:translate(-3px,-3px);background:var(--accent)}
:is(.faq,.s-faq) details{overflow:hidden}:is(.faq,.s-faq) summary::-webkit-details-marker{display:none}
:is(.faq,.s-faq) summary:after{content:'+'!important;transition:transform .35s cubic-bezier(.16,1,.3,1);font-weight:300}
:is(.faq,.s-faq) details[open] summary:after{transform:rotate(45deg)}
.cluj-secondary .s-faq details{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:25px 0}
.cluj-secondary .s-faq details p{padding-right:36px}
.cluj-secondary .footer a{border-bottom:0}
.cluj-secondary input[type=radio],.cluj-secondary input[type=checkbox]{accent-color:var(--accent)}
.cluj-secondary .s-portfolio .s-project{background:transparent;border-radius:0;padding:50px 0 65px;gap:50px}
.cluj-secondary .s-project-image{padding:0;background:var(--card);border-radius:20px}
.cluj-secondary .s-project-image img{display:block;width:100%;border-radius:0}
.cluj-secondary .s-project-image>span{position:absolute;right:20px;bottom:20px;margin:0;background:var(--cream);color:var(--ink);border-radius:30px;padding:10px 16px;font-size:13px;line-height:1.5}
.cluj-secondary .s-project-copy h2{font-size:clamp(32px,3.3vw,55px);line-height:1.1}
.cluj-secondary .s-project-copy p{font-size:16px;line-height:1.65}
body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{animation:none!important;transition:none!important}
body.motion-paused .reveal-word{opacity:1!important;transform:none!important}
body.motion-paused :is(.pill,.s-button,.service-art svg,.menu-title,.nav-roll>span,.project-image img,.s-project-image img){transform:none!important}
@keyframes menu-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes menu-out{to{transform:translateX(100%)}}
@keyframes menu-link-in{from{opacity:0;transform:translate(20px,12px)}to{opacity:1;transform:none}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes backdrop-out{to{opacity:0}}
@keyframes copy-in{from{opacity:0}to{opacity:1}}
@keyframes title-in{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
@media(min-width:801px) and (max-width:1200px){#servicii .service-row{grid-template-columns:22px minmax(0,1fr) 44px;gap:16px}#servicii .service-art{width:44px;height:44px}#servicii .service-art svg{width:40px;height:40px}}
@media(max-width:800px){#servicii .service-row{grid-template-columns:18px minmax(0,1fr) 36px;gap:12px;min-height:155px;padding:26px 0}#servicii .service-row h3{font-size:clamp(24px,7.2vw,28px)}#servicii .service-art{width:36px;height:36px;margin-top:4px}#servicii .service-art svg{width:34px;height:34px}.menu-panel{padding:25px}.menu-panel nav{font-size:28px;margin:35px 0}.menu-panel nav a{padding:21px 0;gap:10px;grid-template-columns:18px 1fr 22px}.menu-contact{font-size:15px}}
@media(prefers-reduced-motion:reduce){.reveal-word{opacity:1!important;transform:none!important}.hero-media img,.hero-media video,.hero-base-frame,.hero-cutout,.hero-cutout-poster,.hero-left,.hero-right,.hero-word,.pill,.s-button,.service-art svg,.menu-title,.nav-roll>span{transform:none!important}:is(.project-image,.s-project-image) img{transform:none!important}}

/* Final viewport and spacing pass. The title is always in front of the subject. */
.hero-word{z-index:6;color:#ffedcc;text-shadow:0 3px 30px #0008;transform:none}
.hero-media:has(.hero-video.has-frame)>img{opacity:0}
@media(min-width:801px){
 .hero{height:100svh;min-height:620px;max-height:none}
 .hero-media{top:88px;bottom:0;height:auto}
 .hero-media:after{background:linear-gradient(#13120d 0,transparent 18%,transparent 64%,#13120dbb 93%,#13120d)}
 .hero-left{top:32%;width:23%;max-width:350px}.hero-right{top:34%;width:23%;max-width:430px}
 .hero-word{bottom:28px;left:7%;right:7%;font-size:min(12.3vw,22svh,235px);justify-content:center;line-height:.95;letter-spacing:-.07em}
 .hero-mini{margin-top:24px;width:190px}.hero-mini img{height:110px}
 .hero-star{margin-bottom:20px;font-size:36px}.hero-right h2{font-size:clamp(28px,2.2vw,42px)}
 .hero-right>p{font-size:15px;line-height:1.5}
}
@media(min-width:801px) and (max-height:720px){
 .hero{min-height:540px}.hero-left,.hero-right{top:29%}.hero-mini{width:150px;margin-top:18px}.hero-mini img{height:80px}
 .hero-star{font-size:28px;margin-bottom:14px}.hero-right h2{font-size:28px}.hero-right>p{font-size:14px;margin-bottom:16px}
 .hero-left p{font-size:16px}.hero-left .status{margin-bottom:16px}.hero-word{bottom:22px}
}
@media(max-width:800px){
 .hero{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;padding:92px 20px 42px}
 .hero-media{position:relative;inset:auto;width:calc(100% + 40px);height:clamp(300px,57svh,480px);margin:0 -20px;flex:none}
 .hero-media img,.hero-media video{object-fit:cover;object-position:53% bottom;mask-image:linear-gradient(transparent,#000 8%,#000 87%,transparent)}
 .hero-left{top:112px;left:20px}.hero-right{position:relative;inset:auto;width:auto;max-width:none;margin-top:10px;transform:none}
 .hero-right h2{font-size:clamp(30px,8.8vw,40px);margin-bottom:16px}.hero-right>p{font-size:16px;line-height:1.55;margin-bottom:24px}
 .hero-star{display:none}.hero-word{position:absolute;inset:auto;top:calc(92px + clamp(300px,57svh,480px) - 56px);left:20px;right:20px;font-size:10.4vw;line-height:1.1;justify-content:start;margin:0;white-space:nowrap}.hero-word em{display:none}
 .menu-panel{height:100dvh}.menu-panel nav{margin:32px 0}.menu-panel nav a{min-height:64px}
 .cluj-secondary .s-hero h1,.cluj-secondary .s-hero.has-art h1{font-size:clamp(35px,9.5vw,44px)}
 .cluj-secondary .s-lead{font-size:17px;line-height:1.6;margin-top:24px}
 .cluj-secondary .s-section{padding:65px 0}.cluj-secondary .s-band{padding:55px 0}.cluj-secondary .s-hero{padding-bottom:65px}
 .cluj-secondary .s-section h2,.cluj-secondary .s-band h2,.cluj-secondary .s-cta h2{font-size:clamp(30px,8.5vw,38px);line-height:1.13}
 .cluj-secondary .s-section p,.cluj-secondary .s-section li,.cluj-secondary .s-checklist li,.cluj-secondary .s-prose p{font-size:16px;line-height:1.65}
 .cluj-secondary .s-cta{padding:32px 24px;border-radius:22px}
 .cluj-secondary .s-form{padding:28px 22px}
 .cluj-secondary .s-button{min-height:50px}.cluj-secondary .s-faq summary{font-size:19px}
}

/* Four-project homepage composition: equal columns and complete screenshots. */
.work .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 36px;align-items:stretch}
.work .project:nth-child(n){grid-column:auto;display:flex;flex-direction:column;gap:0;align-items:stretch;margin-top:0;min-width:0}
.work .project-image{padding:0;aspect-ratio:16/9;flex-shrink:0}
.work .project-image img,.work .project-image:hover img{display:block;width:100%;height:auto!important;aspect-ratio:16/9;object-fit:contain;transform:none!important;will-change:auto}
.work .project-copy{display:flex;flex-direction:column;flex:1;padding-top:24px}
.work .project-copy p{flex:1;max-width:none}
.work .project-copy .text-link{align-self:flex-start;margin-top:24px}
@media(max-width:800px){.work .project-grid{grid-template-columns:minmax(0,1fr);gap:46px}.work .project-copy{padding-top:20px}}