/* Case-study layout experiment (staging preview ?prikaz=studija). FORMAT tokens: BDO Grotesk, gray-a paper, gray-d ink, 9px radius, 12-144 spacing scale. */
.case-study{--cs-gutter:24px;--cs-radius:var(--_apps---sizes--radius,9px);--cs-space:144px}
.case-study p{max-width:none}
.cs-wrap{width:100%;max-width:1452px;margin-inline:auto;padding-inline:var(--cs-gutter)}
.cs-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.cs-kicker{margin:0 0 12px;font-size:13px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-variation-settings:"wght" 500}

/* Title */
.cs-title{display:flex;align-items:center;justify-content:center;min-height:clamp(320px,56vh,600px);padding-block:72px 48px;text-align:center}
.cs-title h1{margin:0;font-size:clamp(40px,12.5vw,196px);line-height:.92;letter-spacing:-.045em;font-variation-settings:"wght" 420;text-wrap:balance}
.cs-title .hero-subtitle{display:block;margin-top:28px;font-size:clamp(16px,1.45vw,21px);line-height:1.4;letter-spacing:0;color:var(--muted);font-variation-settings:"wght" 450}

/* Meta, lead, facts */
.cs-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding-block:14px;border-bottom:1px solid var(--line)}
.cs-meta .breadcrumb{padding:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.cs-tags{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:12px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cs-tags li::before,.cs-card p::before{content:"# "}
.cs-lead{margin:0;padding-block:36px 48px;font-size:clamp(24px,2.5vw,36px);line-height:1.2;letter-spacing:-.01em;font-variation-settings:"wght" 450;text-wrap:pretty}
.cs-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 48px;padding-top:18px;border-top:1px solid var(--line)}
.cs-facts dt{font-size:13px;color:var(--muted)}
.cs-facts dd{margin:6px 0 0;font-size:21px;line-height:1.3}

/* Media */
.cs-media{margin:0}
.cs-frame{position:relative;overflow:hidden;border-radius:var(--cs-radius);background:var(--gray-d)}
.cs-frame>img,.cs-frame>video{display:block;width:100%;height:100%;object-fit:cover}
.cs-media figcaption{padding-top:10px;font-size:13px;line-height:1.45;color:var(--muted)}
.cs-media figcaption strong{font-weight:inherit;font-variation-settings:"wght" 560;color:var(--ink)}
.cs-wide .cs-frame{aspect-ratio:16/9}
.cs-toggle{position:absolute;right:18px;bottom:18px;z-index:2;padding:7px 16px;border:1px solid #ffffff80;border-radius:200px;background:#1f1d1d99;color:var(--white);font:inherit;font-size:13px;cursor:pointer}
.cs-toggle:hover{background:var(--gray-d)}
.cs-diptych{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.cs-diptych .cs-frame{aspect-ratio:4/5}
.cs-details .cs-frame{aspect-ratio:5/4}
.cs-offset .cs-media{grid-column:5/-1}
.cs-offset .cs-frame{aspect-ratio:1}

/* Statements and narrow text */
.cs-statement{padding-block:var(--cs-space)}
.cs-statement>div{grid-column:1/span 8}
.cs-statement h2,.cs-statement p{margin:0;font-size:clamp(24px,2.5vw,36px);line-height:1.2;letter-spacing:-.01em;font-variation-settings:"wght" 450}
.cs-statement h2{color:var(--muted)}
.cs-narrow{padding-block:96px}
.cs-narrow>div{grid-column:3/span 6}
.cs-narrow h2{margin:0 0 18px;font-size:21px;line-height:1.35;letter-spacing:0;font-variation-settings:"wght" 560}
.cs-narrow p:not(.cs-kicker){margin:0;font-size:18px;line-height:1.6}
.cs-narrow p+p{margin-top:18px}

/* Centered films */
.cs-centered{display:flex;flex-direction:column;align-items:center;padding-block:var(--cs-space);text-align:center}
.cs-centered h2{margin:0;max-width:20ch;font-size:clamp(29px,3.2vw,51px);line-height:1.12;letter-spacing:-.01em;font-variation-settings:"wght" 450}
.cs-credit{margin:14px 0 0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cs-credit strong{font-weight:inherit;color:var(--ink)}
.cs-centered .cs-desc{margin:18px 0 36px;max-width:56ch;color:var(--muted)}
.cs-centered .cs-media{width:min(100%,420px)}
.cs-centered .cs-frame{aspect-ratio:9/16}

/* Detail pair */
.cs-detail h3{margin:24px 0 10px;font-size:21px;line-height:1.35;letter-spacing:0;font-variation-settings:"wght" 560}
.cs-detail p{margin:0;max-width:56ch;font-size:16px;line-height:1.55}

/* Scope and materials */
.cs-roles{row-gap:48px;padding-block:120px;margin-top:var(--cs-space);border-top:1px solid var(--line)}
.cs-roles>h2{grid-column:1/span 4;margin:0;font-size:clamp(24px,2.5vw,36px);line-height:1.2;letter-spacing:-.01em;font-variation-settings:"wght" 450}
.cs-role{grid-column:span 4}
.cs-role h3{margin:0 0 14px;font-size:13px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-variation-settings:"wght" 500}
.cs-role ul{margin:0;padding:0;list-style:none}
.cs-role li,.cs-role dl>div{padding:12px 0;border-top:1px solid var(--line);font-size:18px;line-height:1.4}
.cs-role dl{margin:0}
.cs-role dd{margin:4px 0 0;font-size:15px;color:var(--muted)}
.cs-role-foot{grid-column:5/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 36px}
.cs-role-foot p{margin:0;max-width:60ch;font-size:13px;line-height:1.5;color:var(--muted)}
.cs-role-foot a{display:inline-flex;flex-direction:row;align-items:baseline;gap:8px;font-size:14px;text-decoration:underline;text-underline-offset:5px}

/* Photo strip */
.cs-strip{overflow:hidden;padding-bottom:var(--cs-space);--cs-strip-gap:clamp(24px,4.6875vw,64px)}
.cs-strip-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:18px}
.cs-strip-head h2{margin:0;font-size:13px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-variation-settings:"wght" 500}
.cs-strip-toggle{padding:4px 0;border:0;background:none;font:inherit;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.cs-splide .splide__track{cursor:grab}
.cs-splide.is-dragging .splide__track{cursor:grabbing}
.cs-splide .splide__slide:focus-visible{outline:2px solid var(--primary-1);outline-offset:4px}
.cs-strip img{-webkit-user-drag:none;user-select:none}
.cs-splide .splide__slide{width:clamp(246px,26vw,373px)}
.cs-strip .cs-media{width:100%}
.cs-strip .cs-frame{aspect-ratio:4/5}
@media(max-width:767px){.cs-splide .splide__slide{width:min(63vw,260px)}.cs-strip .cs-frame{aspect-ratio:2/3}.cs-strip{--cs-strip-gap:32px}}

/* Related */
.cs-related{padding-bottom:var(--cs-space)}
.cs-related-head{display:flex;justify-content:space-between;align-items:end;gap:24px;padding-top:24px;margin-bottom:36px;border-top:1px solid var(--line)}
.cs-related-head h2{margin:0;font-size:clamp(24px,2.5vw,36px);line-height:1.2;letter-spacing:-.01em;font-variation-settings:"wght" 450}
.cs-related-head a{font-size:14px;text-underline-offset:5px}
.cs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cs-card{display:block;color:inherit;text-decoration:none}
.cs-card .cs-frame{aspect-ratio:4/3}
.cs-card img{transition:transform .5s ease}
.cs-card:hover img{transform:scale(1.03)}
.cs-card h3{margin:14px 0 6px;font-size:21px;line-height:1.3;letter-spacing:0;font-variation-settings:"wght" 450}
.cs-card p{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cs-card:focus-visible{outline:2px solid var(--primary-1);outline-offset:6px;border-radius:var(--cs-radius)}

@media(prefers-reduced-motion:reduce){.cs-strip-toggle{display:none}.cs-card img{transition:none}}
@media(max-width:991px){.case-study{--cs-space:96px}.cs-statement>div,.cs-narrow>div{grid-column:1/-1}.cs-narrow>div{max-width:680px}.cs-narrow{padding-block:72px}.cs-roles{padding-block:96px}.cs-roles>h2,.cs-role-foot{grid-column:1/-1}.cs-role{grid-column:span 6}.cs-offset .cs-media{grid-column:3/-1}}
@media(max-width:767px){.case-study{--cs-space:72px}.cs-title{min-height:0;padding-block:72px 36px}.cs-title h1{font-size:12.6vw}.cs-meta{flex-direction:column;align-items:flex-start}.cs-facts{grid-template-columns:1fr;gap:0}.cs-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}.cs-facts dd{margin:0;font-size:18px;text-align:right}.cs-wide .cs-frame{aspect-ratio:4/5}.cs-diptych{grid-template-columns:1fr}.cs-offset .cs-media,.cs-role{grid-column:1/-1}.cs-narrow{padding-block:56px}.cs-cards{grid-template-columns:1fr;gap:36px}.cs-related-head{flex-direction:column;align-items:flex-start}.cs-toggle{right:12px;bottom:12px}}
@media(max-width:479px){.case-study{--cs-gutter:18px}.cs-narrow p:not(.cs-kicker){font-size:17px}}

/* Client overview */
.cs-client{padding-block:36px 48px}
.cs-client .cs-lead{padding:0;max-width:1100px}

/* Testimonial beside the client video */
.cs-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-testimonial{margin-block:var(--cs-space);padding-block:120px;background:var(--gray-d);color:var(--gray-a)}
.cs-testimonial-grid{align-items:center;row-gap:48px}
.cs-testimonial-video{grid-column:1/span 5;max-width:440px}
.cs-testimonial-video .cs-frame{aspect-ratio:9/16;background:#000}
.cs-testimonial-video figcaption{color:#f1efee99}
.cs-testimonial-copy{grid-column:6/-1;display:flex;flex-direction:column;align-items:flex-start}
.cs-testimonial .cs-kicker{color:#f1efee99}
.cs-quote{margin:0;padding:0;border:0}
.cs-quote p{margin:0;font-size:clamp(34px,4.2vw,64px);line-height:1.08;letter-spacing:-.02em;font-variation-settings:"wght" 420;text-wrap:balance}
.cs-quote-more{margin:28px 0 0;max-width:40ch;font-size:clamp(18px,1.6vw,24px);line-height:1.35;color:#f1efeecc}
.cs-quote-author{display:flex;flex-direction:column;gap:4px;margin:32px 0 0;font-size:16px;line-height:1.3}
.cs-quote-author strong{font-weight:inherit;font-variation-settings:"wght" 560}
.cs-quote-author span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#f1efee99}
.cs-site-link{display:inline-flex;gap:10px;margin-top:40px;padding:12px 26px;font-size:16px}
.cs-site-link:focus-visible{outline:2px solid var(--primary-1);outline-offset:4px}
@media(max-width:991px){.cs-testimonial{padding-block:96px}.cs-testimonial-video{grid-column:1/span 5}.cs-testimonial-copy{grid-column:6/-1}}
@media(max-width:767px){.cs-testimonial{padding-block:72px}.cs-testimonial-copy{grid-column:1/-1;order:-1}.cs-testimonial-video{grid-column:1/-1;max-width:none;width:min(100%,420px)}}

/* Entrance photo with the client logo */
.cs-hero-photo img{object-position:50% 38%}
@media(max-width:767px){.cs-hero-photo img{object-position:72% 40%}}

/* Architect: two columns, brand olive, mirrored against the client testimonial */
.cs-testimonial--alt{background:var(--gray-c);color:var(--gray-b)}
.cs-testimonial--alt .cs-testimonial-copy{grid-column:1/span 7;grid-row:1}
.cs-testimonial--alt .cs-testimonial-video{grid-column:8/-1;grid-row:1;justify-self:end}
.cs-testimonial--alt .cs-kicker,.cs-testimonial--alt .cs-quote-author span,.cs-testimonial--alt figcaption{color:#e6e3dfb3}
.cs-quote-heading{margin:0;font-size:clamp(34px,4.2vw,64px);line-height:1.08;letter-spacing:-.02em;font-variation-settings:"wght" 420;text-wrap:balance}
@media(max-width:767px){.cs-testimonial--alt .cs-testimonial-copy,.cs-testimonial--alt .cs-testimonial-video{grid-column:1/-1;grid-row:auto;justify-self:start}}

/* Full-bleed hero: logo photo with project info over it */
.cs-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(560px,88vh,920px);margin-top:-82px;padding-block:160px 56px;overflow:hidden;background:var(--gray-d);color:var(--white)}
.cs-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 38%}
.cs-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,#0000 38%,#000000b3 100%),linear-gradient(90deg,#00000059 0%,#0000 55%)}
.cs-hero-content{position:relative;z-index:1}
.cs-hero-tags{margin:0 0 18px;font-size:13px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:#ffffffd9}
.cs-hero h1{margin:0;font-size:clamp(56px,11vw,176px);line-height:.92;letter-spacing:-.045em;font-variation-settings:"wght" 420;color:inherit;text-wrap:balance}
.cs-hero .hero-subtitle{display:block;margin-top:22px;font-size:clamp(17px,1.6vw,24px);line-height:1.35;letter-spacing:0;font-variation-settings:"wght" 450;color:#ffffffe6}
.cs-intro .cs-client{padding-top:64px}

/* Two equal columns: zone text and photo */
.cs-split{align-items:center;row-gap:32px;padding-block:96px}
.cs-split-copy{grid-column:1/span 5}
.cs-split-copy h2{margin:0 0 18px;font-size:21px;line-height:1.35;letter-spacing:0;font-variation-settings:"wght" 560}
.cs-split-copy p:not(.cs-kicker){margin:0;font-size:18px;line-height:1.6}
.cs-split-media{grid-column:7/-1}
.cs-split-media .cs-frame{aspect-ratio:1}
@media(max-width:991px){.cs-hero{margin-top:0;min-height:clamp(520px,80svh,760px);padding-top:120px}.cs-split-copy{grid-column:1/span 6}}
@media(max-width:767px){.cs-hero{min-height:78svh;padding-bottom:36px}.cs-hero-bg{object-position:70% 38%}.cs-hero h1{font-size:12.6vw}.cs-split{padding-block:56px}.cs-split-copy,.cs-split-media{grid-column:1/-1}}
@media(max-width:479px){.cs-site-link{padding:11px 20px;font-size:15px;white-space:nowrap}}
@media(max-width:374px){.cs-site-link{white-space:normal;text-align:left}}

/* Standard project hero reused in the case study */
.cs-project-hero .image-bg{object-position:50% 42%}
@media(max-width:767px){.cs-project-hero .image-bg{object-position:66% 40%}}

/* Scope: single list across the right side, primary service button */
.cs-roles .cs-role{grid-column:5/-1}
.cs-roles .cs-role ul{columns:2;column-gap:24px}
.cs-roles .cs-role li{break-inside:avoid}
.cs-role-foot{align-items:center}
.cs-role-foot a.button{display:inline-flex;padding:12px 26px;font-size:16px;line-height:1.4;text-decoration:none;flex-shrink:0}
@media(max-width:991px){.cs-roles .cs-role{grid-column:1/-1}}
@media(max-width:767px){.cs-roles .cs-role ul{columns:1}}

/* Task: same rhythm as zone text, with a primary contact button */
.cs-task .cs-task-button{display:inline-flex;margin-top:28px;padding:12px 26px;font-size:16px;line-height:1.4;text-decoration:none}

/* Client overview: text 3/4, stats 1/4 stacked with the same divider lines */
@media(min-width:768px){
 .cs-intro{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);column-gap:48px;align-items:start;padding-block:64px 48px}
 .cs-intro .cs-client{padding:0}
 .cs-intro .cs-facts{grid-template-columns:1fr;gap:0;margin:0;padding:0;border-top:0}
 .cs-intro .cs-facts>div{padding:14px 0 16px;border-top:1px solid var(--line)}
 .cs-intro .cs-facts>div:last-child{border-bottom:1px solid var(--line)}
 .cs-intro .cs-facts dd{margin-top:4px}
}
@media(min-width:992px){.cs-intro{column-gap:72px}}

/* Longer main quote (deadline statement) */
.cs-quote--long p{font-size:clamp(28px,3.1vw,48px);line-height:1.12}

/* Office case studies: stacked media blocks, photo highlight, multiple outbound links */
.cs-block+.cs-block{margin-top:24px}
.cs-block .cs-diptych{margin-top:0}
.cs-narrow+.cs-block,.cs-split+.cs-block{margin-top:0}
.cs-testimonial-photo .cs-frame{aspect-ratio:4/5;background:var(--gray-d)}
.cs-highlight-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.cs-highlight-links .cs-site-link{margin-top:0}
