#socialne-siete{padding-block:64px 80px;scroll-margin-top:78px;content-visibility:visible}
#socialne-siete .social-wrap{max-width:1440px;margin-inline:auto}
.social-heading{display:flex;justify-content:space-between;align-items:end;gap:32px}
.social-heading h2{margin:0;font-size:clamp(28px,3.2vw,46px);line-height:1.05;letter-spacing:-.035em;font-variation-settings:'wdth' 118,'wght' 800}
.social-heading p{max-width:43ch;margin:0;color:#bdb8b1;font-size:15px;line-height:1.6}
.social-services{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none;padding:0;margin:24px 0;color:#d7d2ca;font-size:13px}
.social-projects{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:repeat(2,262px);gap:16px;isolation:isolate}
.social-project{position:relative;isolation:isolate;overflow:hidden;border-radius:9px;background:#252422;color:#f4f2ed;min-width:0}
.social-project.is-active{grid-column:1;grid-row:1/3;order:-1}
.social-project-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.social-project::after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#141312b3,transparent 55%,#14131288);pointer-events:none}
.social-project.is-active::after{background:linear-gradient(90deg,#141312f5 0%,#141312d9 28%,#14131288 60%,#14131222),linear-gradient(0deg,#14131299,transparent 65%)}
.social-project-toggle{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left;font-family:var(--body)}
.social-project-identity{position:absolute;top:20px;left:20px;right:16px;display:flex;align-items:center;gap:12px}
.social-project-identity img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.social-project-identity strong{display:block;font-size:17px;line-height:1.25}
.social-project-identity small{display:block;margin-top:5px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#e4ded5}
.social-project-plus{position:absolute;bottom:20px;right:20px;display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff99;border-radius:50%;font-size:26px;font-weight:300}
.social-project.is-active .social-project-toggle{height:90px;cursor:default}
.social-project.is-active .social-project-plus{display:none}
.social-project-detail{position:relative;margin-top:140px;padding:0 30px 28px;max-width:390px}
.social-project-detail[hidden]{display:none}
.social-project-detail h3{font:550 clamp(23px,2.1vw,30px)/1.2 var(--body);letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance}
.social-project-detail p{font-size:14px;line-height:1.55;color:#e2ded7;margin:0 0 22px}
.social-project-link{display:inline-flex;align-items:center;gap:16px;min-height:46px;padding:12px 18px;background:#f4f2ed;color:#211e1c;border-radius:6px;text-decoration:none;font:650 14px/1.4 var(--body)}
.social-project-result{margin-top:28px;border-top:1px solid #ffffff30;padding-top:18px;display:grid;gap:5px}
.social-project-result strong{font-size:14px;font-weight:550}.social-project-result span{font-size:12px;color:#cbc6be}
.social-project-toggle:focus-visible{outline:2px solid #eee0b9;outline-offset:-4px;border-radius:9px}
.social-project-link:focus-visible{outline:2px solid #eee0b9;outline-offset:4px}
@media(hover:hover){.social-project:not(.is-active):hover .social-project-plus{background:#f4f2ed;color:#211e1c}.social-project-link:hover{background:#fff}}
@media(min-width:701px) and (max-width:1000px){.social-projects{grid-template-columns:3fr 2fr;grid-template-rows:repeat(2,270px)}.social-project-identity{left:14px;gap:8px}.social-project-identity img{width:30px;height:30px}.social-project-identity strong{font-size:14px}.social-project-identity small{font-size:9px}.social-project-detail{padding-inline:22px;margin-top:115px}.social-project-detail h3{font-size:25px}}
@media(max-width:700px){#socialne-siete{padding-block:44px}.social-heading{display:block}.social-heading p{margin-top:16px;font-size:14px}.social-services{gap:8px 16px;font-size:12px}.social-projects{display:flex;flex-direction:column;gap:12px}.social-project{height:88px;flex:none}.social-project.is-active{height:480px;order:0}.social-project-identity{top:22px;left:18px;right:64px}.social-project-plus{bottom:24px;right:18px}.social-project-detail{margin-top:122px;padding:0 24px 24px;max-width:340px}.social-project-detail h3{font-size:26px}.social-project-detail p{font-size:14px}.social-project-result{margin-top:24px}.social-project.is-active::after{background:linear-gradient(90deg,#141312ed,#141312aa 55%,#14131255)}}
@media(prefers-reduced-motion:reduce){.social-project *{scroll-behavior:auto}}

.social-project{scroll-margin-top:80px}

/* Dedicated reading surface; the photograph recedes smoothly into the dark left side. */
.social-project.is-active{background:#171716}
.social-project.is-active .social-project-photo{left:auto;right:0;width:78%;object-position:65% center}
.social-project.is-active::after{background:linear-gradient(90deg,#171716 0%,#171716 24%,#171716f5 34%,#171716d9 44%,#1717168c 58%,#17171626 78%,transparent 100%),linear-gradient(0deg,#17171666,transparent 38%)}
.social-project.is-active .social-project-detail{width:62%;max-width:360px;padding-right:10px}
.social-project:not(.is-active) .social-project-photo{object-position:center 30%}
.social-project[data-social-project="zen"] .social-project-photo{object-position:center 24%}
.social-project[data-social-project="pebar"] .social-project-photo{object-position:center 60%}
.social-project[data-social-project="eatfit"] .social-project-photo{object-position:center 38%}
.social-project-result{border-top-color:#ffffff30}
@media(min-width:701px) and (max-width:1000px){.social-project.is-active .social-project-detail{width:87%;max-width:350px}.social-project.is-active::after{background:linear-gradient(90deg,#171716 0%,#171716f2 30%,#171716c9 55%,#17171655 100%)}}
@media(max-width:700px){
.social-project.is-active .social-project-photo{width:100%;height:100%;object-position:center}
.social-project.is-active::after{background:linear-gradient(90deg,#171716f5 0%,#171716e6 35%,#171716a6 70%,#17171666 100%),linear-gradient(0deg,#171716 0%,transparent 40%)}
.social-project.is-active .social-project-detail{width:90%;max-width:340px;padding-right:14px}
}

/* Preserve the clicked thumbnail slot when switching the featured client. */
@media(min-width:701px){.social-project{order:var(--social-order,0)}.social-project.is-active{order:-1}}

/* Short service context on collapsed cards; the expanded card owns the full copy. */
.social-project-teaser{position:absolute;left:20px;bottom:22px;right:80px;max-width:34ch;font-size:14px;line-height:1.45;color:#f4f2ed;text-wrap:pretty}
.social-project.is-active .social-project-teaser{display:none}
.social-project:not(.is-active)::after{background:linear-gradient(180deg,#141312b3,transparent 45%,#141312dd 100%)}
@media(max-width:700px){
 .social-project:not(.is-active){height:132px}
 .social-project:not(.is-active) .social-project-identity{top:16px}
 .social-project-teaser{left:18px;bottom:14px;right:72px;font-size:12px;line-height:1.4}
 .social-project:not(.is-active) .social-project-plus{bottom:17px}
}