/* ============================================================
   COLOURFICTION — prototype v2 · zrelo, premium, video-first
   Palete: brass / oxide / verdigris (jedan akcenat, bez duge)
   Type: editorial / serif / swiss (živi switcher)
   ============================================================ */

/* ---------- palete ---------- */
body[data-palette="brass"] {
  --canvas: #100F0D;
  --canvas-2: #171512;
  --paper: #EAE5DA;
  --grey: #8D8779;
  --accent: #C2A15F;
  --line: rgba(234, 229, 218, 0.12);
}
body[data-palette="oxide"] {
  --canvas: #0D0E11;
  --canvas-2: #131519;
  --paper: #EFECE4;
  --grey: #878B94;
  --accent: #B65C3F;
  --line: rgba(239, 236, 228, 0.12);
}
body[data-palette="verdigris"] {
  --canvas: #0E1210;
  --canvas-2: #141A17;
  --paper: #E9EAE4;
  --grey: #83907F;
  --accent: #6FA08A;
  --line: rgba(233, 234, 228, 0.12);
}

/* ---------- tipografija (KONAČNO 2026-08-17: Zodiak display / Inter Tight tekst) ---------- */
body[data-type="zodiak"] {
  --font-display: "Zodiak", serif;
  --font-text: "Inter Tight", sans-serif;
  --display-weight: 640;
  --display-opsz: normal;
  --display-stretch: 100%;
  --display-case: uppercase;
  --display-tracking: -0.015em;
}

:root {
  --font-mono: "JetBrains Mono", monospace;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  /* CASE STUDY sistem (2026-08-17): JEDNA mera za sve — tekst, figure, redovi i
     slajderi vise o istoj levoj ivici. Menjati SAMO ovde. */
  --cs-max: 1560px;
  /* TRI SANKCIONISANE ŠIRINE (2026-08-17, odluka vlasnika — ništa četvrto):
     1. full-bleed  = puna širina strane (hero, .cs-fig--full, track slajdera)
     2. kolona      = min(100%, --cs-max) — tekst, pejzažne solo figure, plejer, tura
     3. pola kolone = --cs-half — SVAKI uspravan kadar van slajdera (par 2×pola,
                      solo uspravna = pola kolone centrirano). Uvek ISTA širina.
     Visina UVEK sledi iz širine (aspect-ratio). Visinski cap (--cs-media-h) ostaje
     SAMO za kadrove u slajderu (.cs-slide). */
  --cs-gap: clamp(1.5rem, 3vw, 2.5rem);
  --cs-half: calc((min(100%, var(--cs-max)) - var(--cs-gap)) / 2);
  /* IZUZETAK (odluka vlasnika 2026-08-17): SOLO uspravan kadar van slajdera (bez para)
     se skalira PO VISINI — cela slika u jedan pogled, ~90% visine ekrana ispod menija,
     centrirana. Konzistentno je jer je visina UVEK ista, bez obzira na odnos stranica.
     Uspravna slika preko dva-tri ekrana je bila greška. */
  --cs-solo-h: calc(90svh - 5rem);
  /* visina kadra u slajderu: 80-90% visine viewporta ispod menija */
  --cs-media-h: clamp(300px, calc(88svh - 5rem), 860px);
  /* SISTEM ŠINE (v36): sekcija koja centrira sadržaj mora da drži ISTU levu ivicu kao
     sekcija koja je full-bleed sa gutter paddingom. Zato max-width uvek obuhvata i gutter:
     max-width: calc(var(--measure) + 2 * var(--gutter)). Bez toga se leva ivica "šeta"
     20px između sekcija (panel 2026-08-16: studio/contact 51 vs 71px). */
  --measure: 1240px;
  /* zona fiksne trake činova (.actnav) uz desnu ivicu: traka ~137px + gutter + vazduh.
     Tekst NIKAD ne ulazi u nju — inače traka gazi opise usluga (panel: 57-79px). */
  --rail-zone: 14rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: clip; }

body {
  background: var(--canvas);
  color: var(--paper);
  font-family: var(--font-text);
  font-weight: 360;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .5s;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

/* display helper — svi veliki naslovi */
.display {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  line-height: 0.98;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}

/* v41: STRELICE — self-hostovani subsetovi (fonts.css) NEMAJU U+2190 ←, U+2192 → ni
   U+2197 ↗; provereno u cmap-u fajlova, ne pretpostavljeno. Svaka takva strelica je
   padala na OS font posetioca (Consolas na Windowsu, nešto treće na Macu) — jedino
   mesto gde se sajt NIJE crtao istim slovima na tuđoj mašini. Pun font ne postoji u
   repou (samo subset), pa se znaci crtaju glifovima koje subset IMA: › U+203A napred,
   ‹ U+2039 nazad, a „izlazi van sajta" = naš ↑ U+2191 okrenut za 45°.
   Ako se ikad doda pun izvorni font: re-subset sa U+2190–2199, proširi unicode-range
   u fonts.css i ovaj blok može da ode. */
.ne {
  display: inline-block;
  transform: rotate(45deg);
  /* okrenuta stabljika sedi malo visoko uz verzalnu mono labelu */
  transform-origin: 50% 55%;
}

/* ---------- loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--canvas);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem;
  transition: opacity .6s, visibility .6s;
}
#loader.is-done { opacity: 0; visibility: hidden; }
.loader__brand { font-weight: 300; letter-spacing: 0.1em; font-size: 1.1rem; }
.loader__brand b { font-weight: 800; }
/* v37: pravi CF znak u loaderu (slika nosi i ispis — bez duplog teksta) */
.loader__logo { display: block; height: 104px; width: auto; margin: 0 auto 1.4rem; }
.loader__bar {
  width: min(260px, 60vw); height: 1px; background: var(--line);
  overflow: hidden;
}
#loader-fill { display: block; height: 100%; width: 0%; background: var(--accent); transition: width .2s; }

/* ---------- custom cursor ---------- */
.cursor {
  position: fixed; z-index: 999; top: 0; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s;
  mix-blend-mode: exclusion;
  opacity: 0;
}
.cursor.is-live { opacity: 1; }
.cursor.is-hover { width: 40px; height: 40px; }
.cursor.is-page {
  mix-blend-mode: normal; z-index: 9999;
  transition: none;
}
@media (hover: none), (max-width: 900px) { .cursor { display: none; } }

/* bez sistemske strelice — tačka je kursor, SVUDA (i preko tranzicionih slojeva) */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
}

/* fokus tastature — vidljiv svuda (cursor:none je sakrio sistemski fokus) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* odlazak: fullscreen sloj otkriven clip-path krugom iz tačke klika
   (umesto skaliranja tačke — bez re-rasterizacije ogromnog sloja = bez štucanja) */
.page-out {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--accent);
  pointer-events: none;
  will-change: clip-path;
}

/* dolazak: statični accent veo POSTOJI pre prvog crtanja nove strane
   (klasa na <html> se postavlja inline skriptom u <head>) — nema treptaja */
.page-veil-static {
  display: none;
  position: fixed; inset: 0; z-index: 9998;
  background: var(--accent);
  pointer-events: none;
  will-change: clip-path;
}
html.veil-in .page-veil-static { display: block; }

/* ---------- nav ---------- */
/* v32: mix-blend-difference uklonjen (accent boja aktivnog linka se pod difference
   izobličavala) — čitljivost preko sadržaja sada rešava scrim pri skrolu (.is-scrolled) */
.nav {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  color: var(--paper);
}
/* v36: scrim je bio poluprozirni ::before (74%) + blur — Chromium je zamućenjem sakrio
   tekst ispod menija, WebKit ne zamućuje pa se tekst video kao duh-tekst (panel: telefon
   na /contact, SEND dugme na /careers mobilu). Merodavna je NEPROZIRNOST, ne zamućenje:
   pri skrolu meni je puna podloga, na vrhu strane ostaje potpuno providan preko kadra. */
.nav {
  background: transparent;
  box-shadow: 0 1px 0 transparent;
  transition: background-color .35s, box-shadow .35s;
}
.nav.is-scrolled {
  background: var(--canvas);
  box-shadow: 0 1px 0 var(--line);
}
.nav__logo { font-weight: 300; font-size: 1rem; letter-spacing: 0.08em; }
.nav__logo b { font-weight: 800; }
.nav__links { display: flex; gap: 2rem; }
.nav__links a {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.85; transition: opacity .2s;
}
.nav__links a:hover { opacity: 1; }
.nav__links a[aria-current="page"] { color: var(--accent); opacity: 1; }
.nav__cta {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 99px;
  padding: 0.55em 1.2em; white-space: nowrap;
  transition: background .25s, color .25s;
}
.nav__cta:hover { background: #fff; color: #000; }
.nav__cta--slot { visibility: hidden; } /* čuva mesto za dokovano hero dugme */

/* burger — samo mobil; iznad menija (u otvorenom stanju = X za izlaz) */
body.menu-open .nav { z-index: 400; } /* nav (i burger-X) iznad mnav overlaya */
/* scrim ne treba preko fullscreen menija */
body.menu-open .nav { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.menu-open .nav__logo { opacity: 0; pointer-events: none; } /* centrirani logo u meniju preuzima */
.nav__burger {
  display: none;
  position: relative;
  background: none; border: 0; cursor: pointer;
  width: 40px; height: 34px;
  flex-direction: column; justify-content: center; gap: 6px;
  padding: 6px;
  color: var(--paper);
}
.nav__burger span {
  display: block; height: 1.5px; width: 100%;
  background: currentColor;
  transition: transform .3s, opacity .3s;
}
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* mobilni meni — fullscreen overlay, sve centrirano */
.mnav {
  position: fixed; inset: 0; z-index: 350;
  background: color-mix(in srgb, var(--canvas) 96%, transparent);
  backdrop-filter: blur(12px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  gap: 3rem; padding: 6rem 2rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s, visibility .35s;
}
body.menu-open .mnav { opacity: 1; visibility: visible; pointer-events: auto; }
.mnav__logo {
  position: absolute; top: 1.3rem; left: 50%; transform: translateX(-50%);
  font-weight: 300; font-size: 1rem; letter-spacing: 0.08em;
}
.mnav__logo b { font-weight: 800; }
.mnav__links { display: flex; flex-direction: column; gap: 1.4rem; align-items: center; }
.mnav__links a {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1;
  transform: translateY(14px); opacity: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .45s;
}
body.menu-open .mnav__links a { transform: none; opacity: 1; }
body.menu-open .mnav__links a:nth-child(2) { transition-delay: .05s; }
body.menu-open .mnav__links a:nth-child(3) { transition-delay: .1s; }
body.menu-open .mnav__links a:nth-child(4) { transition-delay: .15s; }
body.menu-open .mnav__links a:nth-child(5) { transition-delay: .2s; }
body.menu-open .mnav__links a:nth-child(6) { transition-delay: .25s; }
.mnav__links a.is-muted { opacity: 0; }
body.menu-open .mnav__links a.is-muted { opacity: 0.45; }
.mnav__links a[aria-current="page"] { color: var(--accent); }
@media (min-width: 901px) { .mnav, .nav__burger { display: none !important; } }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav { padding: 1rem 1.25rem; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__logo { font-size: 0.9rem; }
}

/* ---------- timecode ---------- */
.timecode {
  position: fixed; z-index: 100; left: var(--gutter); bottom: 1.1rem;
  display: flex; gap: 0.9em; align-items: baseline;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  color: var(--grey);
  mix-blend-mode: difference;
  pointer-events: none;
  transition: opacity .3s;
}
/* HUD se skriva kad pri skrolu naiđe na živi tekst (main.js) — difference blend preko
   teksta pravi nečitljivu kašu (panel: preklop na svih 6 strana) */
.timecode.is-covered { opacity: 0; }
.timecode__rec { color: var(--accent); animation: blink 1.6s steps(2) infinite; }
.timecode__val { color: var(--paper); opacity: 0.75; }
@keyframes blink { 50% { opacity: 0.25; } }
@media (max-width: 900px) { .timecode { display: none; } }

/* ---------- switcher ---------- */
/* strelica za povratak na vrh */
.backtop {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 320;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 72%, transparent);
  backdrop-filter: blur(8px);
  color: var(--paper);
  font-family: var(--font-mono); font-size: 1rem;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, visibility .3s, transform .3s, border-color .25s, color .25s;
}
.backtop.is-visible { opacity: 1; visibility: visible; transform: none; }
.backtop:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 1100px) {
  body:has(.actnav) .backtop { bottom: 4.8rem; } /* iznad act trake na services mobilu */
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--paper); color: var(--canvas);
  padding: 1em 1.8em; border-radius: 99px;
  border: 0; cursor: pointer;
  transition: background .25s, transform .25s;
}
.btn:hover { background: var(--accent); transform: translateY(-2px); }
.btn__arrow { transition: transform .25s; }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--ghost {
  background: transparent; color: var(--paper);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--accent); background: transparent; color: var(--accent); }
.btn--big { font-size: 0.85rem; padding: 1.2em 2.4em; }
.btn--accent { background: var(--accent); color: var(--canvas); }
.btn--accent:hover { background: var(--paper); }

/* hero CTA — uvek fixed, prati "duha" (spacer) u layoutu pa se klampuje na liniju menija */
.btn--spacer { display: inline-flex; visibility: hidden; }
#cta-hero.is-float {
  position: fixed; right: var(--gutter); z-index: 300;
}
@media (max-width: 900px) {
  /* mobil: plutajuće dugme ne postoji — CTA živi u hamburger meniju */
  #cta-hero.is-float { display: none; }
  .btn--spacer { display: none; }
}

/* ============================================================
   HERO — standalone, tipografski
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--gutter) 5rem;
  background:
    radial-gradient(120% 90% at 70% 10%, var(--canvas-2) 0%, var(--canvas) 60%);
  overflow: hidden;
}

/* ambijentalna pozadina hero-a: video loop + tamni scrim + film grain */
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__scrim {
  position: absolute; inset: 0;
  /* ~50% ukupno — korisnikov zahtev */
  background:
    linear-gradient(90deg, rgba(13,13,15,0.42) 0%, rgba(13,13,15,0.22) 55%, rgba(13,13,15,0.3) 100%),
    linear-gradient(180deg, rgba(13,13,15,0.3) 0%, rgba(13,13,15,0.14) 45%, rgba(13,13,15,0.45) 100%);
}
.hero__glow {
  position: absolute; width: 60vw; height: 60vw; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 65%);
  top: -20%; right: -10%;
  animation: glowdrift 16s ease-in-out infinite alternate;
  will-change: transform;
}
.hero__glow--2 {
  width: 44vw; height: 44vw;
  top: auto; bottom: -25%; left: -12%; right: auto;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 60%);
  animation-duration: 22s; animation-delay: -8s;
}
@keyframes glowdrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-8vw, 6vh) scale(1.15); }
}
.hero__grain {
  position: absolute; inset: -100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: grainjump 0.9s steps(4) infinite;
}
@keyframes grainjump {
  0% { transform: translate(0,0); } 25% { transform: translate(-40px,30px); }
  50% { transform: translate(30px,-50px); } 75% { transform: translate(-30px,-20px); }
  100% { transform: translate(0,0); }
}
.hero__topline { position: absolute; top: 5rem; left: var(--gutter); }
.hero__title {
  composes: display;
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.9rem, 9.5vw, 9.5rem);
  line-height: 0.96;
  margin: 2rem 0 3rem;
}
.hero__line { display: block; overflow: hidden; }
.hero__accent { color: var(--accent); }
.hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--grey); max-width: 44ch;
}
.hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.8em;
  opacity: 0.7;
}
.hero__scroll-line {
  width: 48px; height: 1px; background: currentColor; display: inline-block;
  animation: scrollpulse 2.2s ease-in-out infinite; transform-origin: left;
}
@keyframes scrollpulse { 0%,100% { transform: scaleX(0.3);} 50% { transform: scaleX(1);} }
@media (max-width: 900px) {
  .timecode { display: none; }
  .hero__scroll { left: auto; right: 1.25rem; }
}

/* ============================================================
   FILM SEGMENT — fixed canvas + overlay sekcije
   ============================================================ */
.canvas-wrap {
  position: fixed; inset: 0; z-index: 1;
  opacity: 0; pointer-events: none;
  clip-path: circle(0% at 50% 50%);
}
#film-canvas { width: 100%; height: 100%; display: block; }
.canvas-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(13,13,15,0.24), rgba(13,13,15,0.24)), /* blagi ravnomerni sloj — beli most vs beli tekst */
    linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.18) 38%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.45) 100%);
}
/* gradijent u boju pozadine NA VIDEU — pali se dok film izlazi sa ekrana (JS 0→1)
   pa je prelaz u traku ispod fluidan */
.canvas-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--canvas) 65%, transparent) 72%, var(--canvas) 94%);
  opacity: 0;
  pointer-events: none;
}

.film-container { position: relative; z-index: 2; height: 640vh; }

.fs {
  position: absolute; left: 0; right: 0;
  /* naizmenično levo/desno, ali uvučeno ka sredini (~22vw) da oči ne putuju preko celog ekrana */
  padding: 0 var(--gutter) 0 clamp(1.25rem, 22vw, 24vw);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s linear; /* pegla skokove opacity-ja pri skrolu */
  will-change: opacity;
}
.fs--right { padding: 0 clamp(1.25rem, 22vw, 24vw) 0 var(--gutter); }
.fs--right .fs__inner { margin-left: auto; }
.fs__inner > * { will-change: transform, opacity; }
.fs__inner { max-width: 42rem; }
.fs__label { margin-bottom: 1.2rem; color: var(--paper); opacity: 0.85; }
.fs__act {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: 0.04em;
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.fs__heading {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  text-transform: none;
  font-size: clamp(2.2rem, 4.8vw, 4.4rem);
  line-height: 1.05;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.55);
}
.fs__body {
  color: rgba(255,255,255,0.88);
  font-size: 1.02rem; max-width: 40ch;
  text-shadow: 0 1px 18px rgba(0,0,0,0.6);
}
.fs__services {
  color: rgba(255,255,255,0.92);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  max-width: 46ch;
  margin-bottom: 1.6rem;
  text-shadow: 0 1px 18px rgba(0,0,0,0.65);
}
.fs__more {
  display: inline-block;
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 99px;
  padding: 0.7em 1.5em;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.25);
  transition: border-color .25s, color .25s, background .25s;
}
.fs__more:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,0,0,0.4); }
@media (max-width: 900px) {
  .fs { padding-left: var(--gutter); }
  .fs__heading { font-size: clamp(1.8rem, 7.5vw, 2.6rem); }
  .fs__act { font-size: clamp(2rem, 9vw, 2.8rem); }
}

/* ============================================================
   PROCESS — act banneri + accordion
   ============================================================ */
.process { position: relative; z-index: 3; background: var(--canvas); padding: clamp(5rem, 12vh, 9rem) 0 2rem; }
.process__head { padding: 0 var(--gutter); max-width: 1240px; margin: 0 auto 5rem; }
.process__label { margin-bottom: 2rem; }
.process__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  line-height: 1; margin-bottom: 1.6rem;
}
.process__intro { max-width: 52ch; color: var(--grey); font-size: 1.05rem; }

.pact { max-width: 1240px; margin: 0 auto clamp(5rem, 12vh, 8rem); padding: 0 var(--gutter); }
.pact__banner {
  position: relative; overflow: hidden; border-radius: 4px;
  aspect-ratio: 21 / 9; margin-bottom: 2.2rem;
}
.pact__banner img { transition: transform 1s cubic-bezier(.22,1,.36,1); }
.pact__banner:hover img { transform: scale(1.03); }
.pact__banner figcaption {
  position: absolute; left: 1.1rem; bottom: 1rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.5); padding: 0.45em 0.9em; border-radius: 2px;
  backdrop-filter: blur(4px); text-transform: uppercase;
}
.pact__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 1.6rem;
}
.pact__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1;
  display: flex; align-items: baseline; gap: 1.2rem;
}
.pact__num { color: var(--accent); font-size: 0.72rem; }
.pact__motto { color: var(--grey); font-style: italic; }

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__head {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-text); font-weight: 420; font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--paper); text-align: left;
  padding: 1.1em 0.2em;
  transition: color .25s, padding-left .3s;
}
.acc__head:hover { color: var(--accent); padding-left: 0.8em; }
.acc__item.is-open .acc__head { color: var(--accent); }
.acc__icon {
  font-family: var(--font-mono); font-weight: 300; font-size: 1.1em;
  transition: transform .35s;
}
.acc__item.is-open .acc__icon { transform: rotate(45deg); }
.acc__body { overflow: hidden; height: 0; }
.acc__body p {
  padding: 0.2em 0.2em 1.4em; max-width: 62ch;
  color: var(--grey); font-size: 0.98rem;
}

/* ============================================================
   WORK — velike kartice, 2 kolone
   ============================================================ */
.work { position: relative; z-index: 3; background: var(--canvas); padding: clamp(5rem, 12vh, 9rem) var(--gutter); }
/* 1520 = 2×760 (širina prve case slike) → leva ivica naslova = leva ivica slike, na svim širinama */
.work__head { max-width: 1520px; margin: 0 auto 4rem; }
.work__label { margin-bottom: 2rem; }
.work__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.6rem, 6.5vw, 5.5rem); line-height: 1;
}
/* case studies — ogledalo oko središnje ose:
   slika levo → desna ivica slike na sredini, tekst levom ivicom uz sredinu;
   slika desno → leva ivica slike na sredini, tekst desnom ivicom uz sredinu */
.cases { max-width: 1560px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(5rem, 12vh, 8rem); }
.case {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}
/* neparni: slika levo uz centar, tekst desno od centra (levo ravnat) */
/* v37: kartice povećane (640→760, tall 470→560) — maksimum koji ogledalo oko središnje ose dozvoljava */
.case__media { justify-self: end; width: min(100%, 760px); overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 10; }
.case__info { justify-self: start; padding-left: clamp(2rem, 4vw, 3.5rem); max-width: 34rem; }
/* parni: slika desno uz centar, tekst levo od centra (desno ravnat) */
.case:nth-child(even) .case__media { order: 2; justify-self: start; }
.case:nth-child(even) .case__info {
  order: 1; justify-self: end;
  padding-left: 0; padding-right: clamp(2rem, 4vw, 3.5rem);
  text-align: right;
}
.case:nth-child(even) .case__line { margin-left: auto; }
.case__media img { height: 112%; margin-top: -6%; } /* prostor za parallax */
/* portretni kadrovi */
.case--tall .case__media { aspect-ratio: 4 / 5; width: min(100%, 560px); }
@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; gap: 1.5rem; }
  .case__media, .case--tall .case__media { width: 100%; justify-self: stretch; }
  .case__info, .case:nth-child(even) .case__info {
    order: 2; justify-self: stretch; padding: 0; text-align: left;
  }
  .case:nth-child(even) .case__media { order: 1; }
  /* v37: mirror varijanta ostavlja margin-left:auto na pasusu — u stacked rasporedu
     pasus visi ~135px desno od ostatka kolone (sudijski nalaz, kartice 02 i 04) */
  .case:nth-child(even) .case__line { margin-left: 0; }
}
.case__label { margin-bottom: 1.4rem; }
.case__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.4rem, 4.5vw, 4.2rem); line-height: 1;
  margin-bottom: 1.1rem;
}
.case__line { color: var(--grey); font-size: 1.05rem; max-width: 42ch; margin-bottom: 1.6rem; }
.case__acts { color: var(--accent); margin-bottom: 2rem; }
.case__more {
  color: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.4em;
  transition: color .25s, border-color .25s;
}
.case:hover .case__more { color: var(--accent); border-color: var(--accent); }

/* confidential — full-width traka */
.case--slate {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--canvas-2);
  overflow: hidden;
}
.case--slate__body {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding: 2.2rem 2.4rem;
}
.slate__stripes {
  height: 22px;
  background: repeating-linear-gradient(-45deg, var(--paper) 0 16px, var(--canvas) 16px 32px);
  opacity: 0.8;
}
.slate__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.05;
}
.slate__sub { line-height: 2; }

/* ============================================================
   STUDIO
   ============================================================ */
.studio {
  position: relative; z-index: 3; background: var(--canvas);
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  border-top: 1px solid var(--line);
}
.studio__label { max-width: 1240px; margin: 0 auto 2.5rem; }
.studio__grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
.studio__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.4rem, 5.5vw, 4.6rem); line-height: 1.02;
}
.studio__body p { color: var(--grey); font-size: 1.05rem; margin-bottom: 2rem; max-width: 52ch; }
@media (max-width: 900px) { .studio__grid { grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT — start your fiction
   ============================================================ */
.contact {
  position: relative; z-index: 3; background: var(--canvas-2);
  padding: clamp(5rem, 14vh, 10rem) var(--gutter);
  border-top: 1px solid var(--line);
}
.contact__grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 5fr 6fr; gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}
.contact__label { margin-bottom: 2rem; }
.contact__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: 1; margin-bottom: 1.6rem;
}
.contact__title em { color: var(--accent); }
.contact__punch {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  margin-bottom: 1.4rem;
}
.contact__sub { color: var(--grey); max-width: 44ch; margin-bottom: 3rem; }
.contact__direct p { margin-bottom: 0.9em; color: var(--paper); opacity: 0.8; }

.form { display: flex; flex-direction: column; gap: 2.2rem; }
.form__set { border: 0; }
.form__legend { margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-family: var(--font-text); font-size: 0.9rem; font-weight: 400;
  color: var(--grey);
  background: transparent;
  border: 1px solid var(--line); border-radius: 99px;
  padding: 0.55em 1.3em; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.chip:hover { color: var(--paper); border-color: var(--grey); }
.chip.is-on {
  color: var(--canvas); background: var(--accent); border-color: var(--accent);
  font-weight: 500;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: 0.6rem; }
.field__label { font-size: 0.6rem; }
.field input, .field textarea {
  font-family: var(--font-text); font-size: 1rem; font-weight: 380;
  color: var(--paper);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: 0.6em 0.1em;
  outline: none; resize: vertical;
  transition: border-color .25s;
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--grey) 65%, transparent); }
.field input:focus, .field textarea:focus { border-color: var(--accent); }
/* honeypot — nevidljivo polje za botove */
.form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form__submit { align-self: flex-start; margin-top: 0.5rem; }
.form__ok { color: var(--accent); }
@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}
/* contact kao zasebna strana — page-hero nosi naslov, sekcija bez gornje ivice */
.contact--page { border-top: 0; padding-top: clamp(1rem, 4vh, 2.5rem); background: var(--canvas); }
.contact__direct a { transition: color .25s; }
.contact__direct a:hover { color: var(--accent); }

/* ============================================================
   SERVICES v2 — "chapters": full-bleed otvaranja + editorial lista
   ============================================================ */
.chapter__hero {
  position: relative; min-height: 88svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 6rem var(--gutter) 4.5rem clamp(1.25rem, 14vw, 16vw);
  overflow: hidden;
}
.chapter__media {
  position: absolute; inset: 0; z-index: 0;
}
.chapter__media img, .chapter__media video { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.chapter__hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(13,13,15,0.72) 0%, rgba(13,13,15,0.3) 55%, rgba(13,13,15,0.2) 100%),
    linear-gradient(180deg, rgba(13,13,15,0.55) 0%, rgba(13,13,15,0.1) 40%, rgba(13,13,15,0.75) 100%);
}
/* ACT II je film — zatamnjenje drasticno slabije da se kadar vidi;
   citljivost naslova se cuva uskim dzepom levo-dole + senkom teksta, ne prekrivanjem celog kadra */
#act-2 .chapter__hero::after {
  background:
    linear-gradient(90deg, rgba(13,13,15,0.6) 0%, rgba(13,13,15,0.22) 38%, rgba(13,13,15,0) 70%),
    linear-gradient(180deg, rgba(13,13,15,0.18) 0%, rgba(13,13,15,0) 32%, rgba(13,13,15,0.42) 100%);
}
#act-2 .chapter__act,
#act-2 .chapter__name,
#act-2 .chapter__motto { text-shadow: 0 2px 24px rgba(8,8,10,0.85), 0 1px 6px rgba(8,8,10,0.6); }

.chapter__act, .chapter__name, .chapter__motto, .chapter__caption { position: relative; z-index: 2; }
.chapter__act {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1; color: var(--accent);
  text-shadow: 0 2px 28px rgba(0,0,0,0.5);
}
.chapter__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  line-height: 1; margin: 0.4rem 0 1rem;
  text-shadow: 0 2px 32px rgba(0,0,0,0.55);
}
.chapter__motto {
  color: rgba(255,255,255,0.88); font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  text-shadow: 0 1px 18px rgba(0,0,0,0.6);
}
.chapter__caption {
  position: absolute; right: var(--gutter); bottom: 1.2rem; z-index: 1;
  color: rgba(255,255,255,0.94);
  padding: 0.45em 0.9em; border-radius: 99px;
  background: rgba(8,8,10,0.42); backdrop-filter: blur(6px);
  text-shadow: 0 1px 10px rgba(8,8,10,0.85);
}
/* chip ide do desne ivice; na širinama gde je traka činova vertikalna njegov desni rub
   staje tamo gde staje i lista usluga (panel: chip se sudarao sa trakom do 27px) */
@media (min-width: 1101px) {
  .chapter__caption { right: max(var(--rail-zone), calc((100% - var(--measure)) / 2)); }
}

.chapter__list {
  /* leva ivica pada na globalnu šinu (isti izraz kao sekcije sa unutrašnjim kontejnerom
     mere 1240), desna se povlači ispred fiksne trake činova — max() bira ono što je veće,
     pa poravnanje ostaje isto na svakoj širini */
  padding: clamp(3.5rem, 9vh, 6.5rem) var(--gutter) clamp(4rem, 11vh, 8rem);
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
}
@media (min-width: 1101px) {
  /* traka činova je vertikalna uz desnu ivicu — tekst se zaustavlja ispred nje */
  .chapter__list { padding-right: max(var(--rail-zone), calc((100% - var(--measure)) / 2)); }
}
.svc {
  display: grid; grid-template-columns: 4rem 5fr 6fr;
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: baseline;
  padding: clamp(1.6rem, 3.5vh, 2.6rem) 0.2rem;
  border-top: 1px solid var(--line);
}
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc__no { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.14em; }
.svc__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.1;
}
.svc__desc { color: var(--grey); font-size: 1rem; max-width: 52ch; }
@media (max-width: 900px) {
  .svc { grid-template-columns: 3rem 1fr; }
  .svc__desc { grid-column: 2; }
  .chapter__hero { padding-left: var(--gutter); min-height: 70svh; }
}

/* ---------- act navigacija (services) — brzi skok između činova ---------- */
.actnav {
  position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%);
  z-index: 90;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.actnav a {
  display: flex; align-items: center; gap: 0.7em; justify-content: flex-end;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.82);
  transition: color .25s;
  /* Iza trake NEMA pozadine, ploče ni gradijenta — veo je ostavljao vidljivu fleku preko
     svetlog kadra (odluka vlasnika, v0.8.3). Čitljivost nosi senka na slovima.
     v0.4.3 (odluka vlasnika: pun obrub u 8 pravaca „deluje ružno"): obrub sa 0 blura je
     UKINUT — on je taj koji je crtao vidljiv crn okvir oko svakog slova. Umesto njega
     MEKI slojevi bez ijednog tvrdog offseta: tesan kontaktni (1px/2px) drži ivicu glifa
     nad vedrim nebom, širi odvaja slovo od pozadine. Preko platna (#0D0E11) je nevidljiv.
     v37: polomljen komentar je GUTAO celu ovu deklaraciju (sudije: traka nečitljiva preko
     svetlih kadrova) — popravljen + dodat jedan širi sloj. */
  text-shadow:
    0 1px 2px rgba(5,5,7,0.85),
    0 0 2px rgba(5,5,7,0.85),
    0 0 4px rgba(5,5,7,0.6),
    0 0 9px rgba(5,5,7,0.35),
    0 0 16px rgba(5,5,7,0.45);
}
/* crtica nije tekst — istu meku senku dobija preko drop-shadow, bez tvrdog obruba */
.actnav a .actnav__line { filter: drop-shadow(0 1px 2px rgba(5,5,7,0.85)) drop-shadow(0 0 4px rgba(5,5,7,0.55)); }
.actnav a .actnav__line {
  width: 22px; height: 1px; background: currentColor; display: inline-block;
  transition: width .25s, background-color .25s;
  order: 2;
}
/* AKTIVNI čin je u akcentu (#B65C3F) — jedini slučaj gde meka senka mora biti gušća:
   narandžasto na srednjim tonovima (zelena biljka, topli kamen) ima najmanji kontrast na
   celom sajtu. Isti princip, bez ijednog tvrdog offseta — samo zbijeniji blurovi. */
.actnav a.is-active {
  color: var(--accent);
  text-shadow:
    0 1px 2px rgba(5,5,7,0.92),
    0 0 2px rgba(5,5,7,0.92),
    0 0 4px rgba(5,5,7,0.8),
    0 0 10px rgba(5,5,7,0.55),
    0 0 18px rgba(5,5,7,0.55);
}
.actnav a.is-active .actnav__line { width: 44px; }
.actnav a:hover { color: var(--paper); }
/* v0.8.3 (odluka vlasnika): traka se VIŠE NE krije nad full-bleed blokovima — vidljiva je
   sve vreme. IO logika koja je spuštala opacity je uklonjena iz main.js; `is-hidden` ostaje
   samo kao mehanizam za buduću upotrebu i niko ga trenutno ne pali. */
.actnav { transition: opacity .35s; }
.actnav.is-hidden { opacity: 0; pointer-events: none; }
/* varijanta za case study: uz broj čina stoji i naziv (ACT I / The Image) */
.actnav--case { right: var(--gutter); } /* poravnato sa "Start your fiction" dugmetom */
/* v0.8.3: veo/gradijent iza trake je UKLONJEN — preko svetlog kadra se video kao fleka.
   Iza trake nema NIŠTA; čitljivost nosi samo oreol na tekstu (vidi .actnav a). */
.actnav--case a { align-items: center; }
/* v37: gap 3→5px — ascenderi italik imena ulazili u mono labelu iznad (sudijski nalaz) */
.actnav__txt { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.actnav__txt b { font-weight: 600; letter-spacing: 0.16em; color: var(--paper); opacity: 0.95; }
.actnav a.is-active .actnav__txt b { color: var(--accent); opacity: 1; }
.actnav__txt i {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-style: italic; text-transform: none;
  font-size: 0.85rem; font-weight: 420; letter-spacing: 0.01em; line-height: 1;
  opacity: 0.95;
}
@media (max-width: 1100px) {
  .actnav {
    top: auto; bottom: 0; right: 0; left: 0; transform: none;
    flex-direction: row; justify-content: center; gap: 1.6rem;
    padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--canvas) 88%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  .actnav a .actnav__line { display: none; }
  .actnav--case { gap: 1.1rem; }
  .actnav--case .actnav__txt { align-items: center; gap: 2px; }
  /* donja traka je fiksna: dno strane (futer) i dno heroja moraju da prođu pored nje,
     inače se poslednji red seče (v0.8.2 — traka na case stranama ima dva reda teksta) */
  body:has(.actnav) .footer { padding-bottom: 9.5rem; }
  body:has(.actnav) .cs-hero { padding-bottom: 9rem; }
}

/* ============================================================
   PODSTRANICE — page hero + cta (services.html)
   ============================================================ */
.page-hero {
  padding: clamp(9rem, 20vh, 13rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto;
}
/* v35: varijanta sa jedva vidljivom atmosferskom pozadinom (full-bleed image + tamni scrim) */
.page-hero--media { position: relative; z-index: 0; }
.page-hero--media > *:not(.page-hero__bg) { position: relative; z-index: 1; }
.page-hero__bg {
  position: absolute; top: 0; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  z-index: 0; overflow: hidden; pointer-events: none;
}
.page-hero__bg img, .page-hero__video { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute; inset: 0;
  /* slika se samo "nazire" — tamni veo + gradijent ka levoj (tekst) i ka dnu (spoj sa sekcijom) */
  background:
    linear-gradient(90deg, rgba(13,14,17,0.56) 0%, rgba(13,14,17,0.26) 58%, rgba(13,14,17,0.18) 100%),
    linear-gradient(180deg, rgba(13,14,17,0.40) 0%, rgba(13,14,17,0.54) 64%, var(--canvas) 100%);
}
/* Careers: kuće (desno) da se vide malo bolje — desni deo i sredina svetliji, levo (naslov) ostaje čitljiv */
.page-hero--careers .page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(13,14,17,0.60) 0%, rgba(13,14,17,0.22) 55%, rgba(13,14,17,0.06) 100%),
    linear-gradient(180deg, rgba(13,14,17,0.40) 0%, rgba(13,14,17,0.50) 60%, var(--canvas) 100%);
}
/* desktop: hero je niži pa fade-to-canvas seče sliku prerano — spuštamo tamnjenje ka dnu
   (sredina ostaje svetlija duže, canvas tek pri samom dnu) da kuće ne budu odsečene */
@media (min-width: 1024px) {
  .page-hero--careers .page-hero__scrim {
    background:
      linear-gradient(90deg, rgba(13,14,17,0.58) 0%, rgba(13,14,17,0.20) 55%, rgba(13,14,17,0.05) 100%),
      linear-gradient(180deg, rgba(13,14,17,0.36) 0%, rgba(13,14,17,0.42) 64%, rgba(13,14,17,0.55) 86%, var(--canvas) 100%);
  }
}
/* mobil: klip pomeren (crop udesno = slika ulevo) da stolica + šolja dođu u desnu trećinu, cele;
   scrim posvetljen desno/sredini da se stolica i para vide, levo (naslov) ostaje tamno */
@media (max-width: 600px) {
  .page-hero--contact .page-hero__video { object-position: 70% 50%; }
  .page-hero--contact .page-hero__scrim {
    background:
      linear-gradient(90deg, rgba(13,14,17,0.68) 0%, rgba(13,14,17,0.30) 52%, rgba(13,14,17,0.05) 100%),
      linear-gradient(180deg, rgba(13,14,17,0.36) 0%, rgba(13,14,17,0.40) 70%, rgba(13,14,17,0.62) 92%, var(--canvas) 100%);
  }
  /* naslov ostaje gore; paragraf gurnut ka dnu (tamni deo) preko flex-a — stolica ostaje na mestu
     (video prekriva celu sekciju pa običan margin ne bi razdvojio tekst i stolicu) */
  .page-hero--contact { display: flex; flex-direction: column; min-height: 88vh; }
  .page-hero--contact .page-hero__intro { margin-top: auto; margin-bottom: 4vh; }
}
/* Contact: CASA R video (topao kadar, stolica + kafa desno) — levo tamnije za beli naslov,
   desno svetlije da se scena vidi; donji fade spušten (kao careers desktop) */
.page-hero--contact .page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(13,14,17,0.66) 0%, rgba(13,14,17,0.32) 56%, rgba(13,14,17,0.14) 100%),
    linear-gradient(180deg, rgba(13,14,17,0.44) 0%, rgba(13,14,17,0.54) 66%, var(--canvas) 100%);
}
@media (min-width: 1024px) {
  .page-hero--contact .page-hero__scrim {
    background:
      linear-gradient(90deg, rgba(13,14,17,0.66) 0%, rgba(13,14,17,0.30) 56%, rgba(13,14,17,0.12) 100%),
      linear-gradient(180deg, rgba(13,14,17,0.40) 0%, rgba(13,14,17,0.46) 66%, rgba(13,14,17,0.58) 88%, var(--canvas) 100%);
  }
}
.page-hero__label { margin-bottom: 2rem; }
.page-hero__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(3rem, 8vw, 7rem); line-height: 0.98;
  margin-bottom: 2rem;
}
.page-hero__intro { max-width: 56ch; color: var(--grey); font-size: 1.1rem; margin-bottom: 3rem; }
.page-hero__acts { display: flex; flex-wrap: wrap; gap: 0.6rem 2.2rem; }
.page-hero__acts a {
  color: var(--grey); padding-bottom: 0.3em;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.page-hero__acts a:hover { color: var(--accent); border-color: var(--accent); }

.page-cta {
  padding: clamp(6rem, 16vh, 11rem) var(--gutter);
  text-align: center;
  background: var(--canvas-2);
  border-top: 1px solid var(--line);
}
.page-cta__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.4rem, 6vw, 5.5rem); line-height: 1;
  margin-bottom: 2.5rem;
}
.page-cta__title em { color: var(--accent); }
/* v37: fade trake činova je uklonjen (v0.8.3) pa duži CTA naslov ulazi pod traku na
   1280 — simetrična staza čuva centriranje, a naslov se skalira po dostupnoj širini */
@media (min-width: 1101px) {
  body:has(.actnav) .page-cta { padding-inline: max(var(--gutter), var(--rail-zone, 14rem)); }
  body:has(.actnav) .page-cta__title { font-size: clamp(2.4rem, 4.9vw, 5.5rem); }
}

/* ============================================================
   CASE STUDY — work-mirage.html (šablon za projekat-strane)
   ============================================================ */
.cs-hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 6rem var(--gutter) 4rem;
  overflow: hidden;
}
.cs-hero__media { position: absolute; inset: 0; }
/* v0.4.3: hero može biti slika ILI film (Twins, Brankov) — isto kropovanje i isti
   parallax višak, da zamena img→video ne promeni kadar ni za piksel. */
.cs-hero__media img,
.cs-hero__media video {
  display: block;
  width: 100%; height: 112%; object-fit: cover;
  object-position: 38% 50%; /* zgrada je u levoj trećini kadra */
  will-change: transform;
}
.cs-hero__media video { background: #000; }
.cs-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13,14,17,0.5) 0%, rgba(13,14,17,0.08) 38%, rgba(13,14,17,0.66) 100%),
    linear-gradient(90deg, rgba(13,14,17,0.3) 0%, rgba(13,14,17,0) 55%);
}
.cs-hero__label, .cs-hero__title, .cs-hero__foot { position: relative; z-index: 2; }
/* v37: meka senka i na mono linijama heroja — eyebrow/meta su padali na svetle
   delove kadra (D2 kablovi, Brankov fasada) i gubili se (sudijski nalaz) */
.cs-hero__label {
  margin-bottom: 1.2rem; color: rgba(255,255,255,0.78);
  text-shadow: 0 1px 3px rgba(5,5,7,0.85), 0 0 12px rgba(5,5,7,0.55);
}
.cs-hero__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(4rem, 15vw, 13rem);
  line-height: 0.92;
  text-shadow: 0 2px 40px rgba(0,0,0,0.45);
}
.cs-hero__line { display: block; overflow: hidden; }
.cs-hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2rem; flex-wrap: wrap; margin-top: 1.8rem;
}
.cs-hero__sub {
  max-width: 46ch; color: rgba(255,255,255,0.9);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  text-shadow: 0 1px 18px rgba(0,0,0,0.6);
}
.cs-hero__meta {
  color: rgba(255,255,255,0.72);
  text-shadow: 0 1px 3px rgba(5,5,7,0.85), 0 0 12px rgba(5,5,7,0.55);
  /* v37: meta uvek u svom redu ispod lead-a (na 1280 Mirage je uletala desno u isti red) */
  width: 100%;
}

/* ---------- ACT traka na case strani: desna staza za tekst (v0.8.2) ----------
   Traka činova je fiksna uz desnu ivicu strane na >=1101px (ispod toga je donja traka).
   PRAVILO: tekst NIKAD ne ulazi u njenu zonu (--rail-zone); full-bleed mediji, parovi
   i slajder-track SMEJU pod nju. Staza se računa iz stvarne desne ivice bloka pa je
   uvek tačno onoliko koliko treba (na 1920 = 44px, na 1280 = 173px):
     --rail-col  → blok centriran na --cs-max unutar roditelja sa gutter paddingom
     --rail-page → blok centriran na --cs-max, a 100% mu je puna širina strane
     --rail-edge → blok ide do samog gutter-a strane (hero, natpis full kadra)
   Isti obrazac kao Services (.chapter__list / .chapter__caption). */
@media (min-width: 1101px) {
  body[data-cf^="work-"] {
    --rail-col:  max(0px, calc(var(--rail-zone) - var(--gutter) - max(0px, (100% - var(--cs-max)) / 2)));
    --rail-page: max(0px, calc(var(--rail-zone) - var(--gutter) - max(0px, (100% - var(--cs-max) - 2 * var(--gutter)) / 2)));
    --rail-edge: max(0px, calc(var(--rail-zone) - var(--gutter)));
    /* isto kao --rail-col, ali mereno iz viewporta — za blokove kojima je roditelj uža
       kutija (npr. natpis u desnoj koloni dron jedinice), pa im procenat ne bi valjao */
    --rail-vw: max(0px, calc(var(--rail-zone) - var(--gutter) - max(0px, (100vw - var(--cs-max)) / 2)));
  }
}
.cs-brief__label, .cs-brief__grid,
.cs-act__head, .cs-group__head,
.cs-delivered__label, .cs-delivered__grid { padding-right: var(--rail-col, 0px); }
/* hero, slajderi, cs-cta, cs-related, page-cta i futer NE dobijaju stazu — tamo traka bledi (JS) */

/* ---------- brief ---------- */
.cs-brief { position: relative; z-index: 3; background: var(--canvas); padding: clamp(5rem, 12vh, 9rem) var(--gutter) 0; }
.cs-brief__label { max-width: var(--cs-max); margin: 0 auto 2.5rem; }
.cs-brief__grid {
  max-width: var(--cs-max); margin: 0 auto;
  display: grid; grid-template-columns: 7fr 4fr; gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
.cs-brief__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.6rem, 5.5vw, 4.6rem); line-height: 1.02;
  margin-bottom: 1.8rem;
}
.cs-brief__title em { color: var(--accent); }
.cs-brief__body p { color: var(--grey); font-size: 1.05rem; max-width: 58ch; margin-bottom: 1.2rem; }
.cs-brief__meta { border-top: 1px solid var(--line); font-size: 0.62rem; }
.cs-brief__meta div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.95em 0.1em; border-bottom: 1px solid var(--line);
}
.cs-brief__meta span:first-child { color: var(--accent); white-space: nowrap; }
.cs-brief__meta span:last-child { text-align: right; color: var(--paper); opacity: 0.82; line-height: 1.7; }

/* samostalna „ploča" (uvodni kadar iza brief-a). v0.8.2: pejzaž puni KOLONU (visina iz
   odnosa); uspravan kadar je SOLO slučaj — dobija .cs-setting--solo i skalira se po
   visini (--cs-solo-h), centriran. */
.cs-setting { max-width: var(--cs-max); margin: clamp(3.5rem, 9vh, 6rem) auto 0; display: flex; flex-direction: column; align-items: center; }
.cs-setting__media {
  width: 100%; aspect-ratio: var(--ar, 5 / 8);
  overflow: hidden; border-radius: 4px;
}
.cs-setting--solo .cs-setting__media { width: min(100%, calc(var(--cs-solo-h) * var(--ar, 0.625))); }
.cs-setting__media video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cs-setting figcaption { margin-top: 1rem; color: var(--grey); }

/* ---------- act sekcije ---------- */
.cs-act { position: relative; z-index: 3; background: var(--canvas); padding: clamp(5rem, 12vh, 9rem) var(--gutter); }
.cs-act--film { background: var(--canvas-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs-act__head { max-width: var(--cs-max); margin: 0 auto clamp(3rem, 7vh, 5rem); }
.cs-act__no {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: 0.04em;
  font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1;
  color: var(--accent);
}
.cs-act__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: 1;
  margin: 0.4rem 0 1.4rem;
}
.cs-act__line { color: var(--grey); font-size: 1.05rem; max-width: 52ch; }
.cs-act__desc { margin-top: 1.6rem; }
.cs-act__desc p { color: var(--grey); font-size: 1rem; max-width: 62ch; margin-bottom: 1rem; }
.cs-act__desc p:last-child { margin-bottom: 0; }

/* ---------- galerija ---------- */
.cs-fig { margin: 0 auto; }
.cs-fig__media { overflow: hidden; border-radius: 4px; }
.cs-fig__media img { height: 112%; margin-top: -6%; } /* prostor za parallax */
.cs-fig figcaption { margin-top: 0.9rem; color: var(--grey); }
.cs-fig--full { margin: 0 calc(-1 * var(--gutter)); }
.cs-fig--full .cs-fig__media { border-radius: 0; aspect-ratio: 21 / 10; }
/* natpis full kadra je poravnat desno — staza ga drži ispred trake činova */
.cs-fig--full figcaption { text-align: right; padding: 0 calc(var(--gutter) + var(--rail-edge, 0px)) 0 var(--gutter); }
.cs-fig--wide { max-width: var(--cs-max); margin-top: clamp(2.5rem, 6vh, 4rem); }
.cs-fig--wide .cs-fig__media { aspect-ratio: 16 / 8.5; }
/* SOLO uspravan kadar van slajdera (nema par): visina vodi — cela slika u jedan pogled
   (--cs-solo-h), centrirana. Na uskom ekranu min() vrati punu kolonu. */
.cs-fig--solo { width: min(100%, calc(var(--cs-solo-h) * var(--ar, 0.75))); margin-inline: auto; margin-top: clamp(2.5rem, 6vh, 4rem); }
.cs-fig--solo figcaption { text-align: center; }
.cs-row {
  max-width: var(--cs-max); margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  display: grid; gap: var(--cs-gap);
  align-items: end;
}
/* grid item sa `margin: 0 auto` NE dobija stretch — širinu mu je onda određivao
   `sizes` atribut slike, pa su dve slike ISTOG odnosa u paru ispadale različite
   (npr. 480 i 570 px). U redu figura UVEK puni svoju kolonu. */
.cs-row > .cs-fig { margin-inline: 0; width: 100%; }
.cs-row .cs-fig__media { aspect-ratio: 16 / 10; }
.cs-row .cs-fig--portrait .cs-fig__media { aspect-ratio: 4 / 5; }
/* DOGOVOR (2026-08-17): slike se NE kropuju bez izričitog odobrenja.
   .cs-fig--native: okvir preuzima odnos stranica SLIKE (--ar na figuri),
   slika ide cela, bez parallax viška; ima prednost nad svim gornjim odnosima. */
.cs-fig--native .cs-fig__media,
.cs-row .cs-fig--native .cs-fig__media { aspect-ratio: var(--ar); }
.cs-fig--native .cs-fig__media img { height: 100%; margin-top: 0; }
/* v0.8.2: širina se VIŠE NE izvodi iz visine (to je pravilo „10 različitih širina").
   Samostalna figura puni kolonu (.cs-fig--wide) ili pola kolone (.cs-fig--half);
   visina uvek sledi iz širine preko aspect-ratio. Visinski cap ostaje samo u slajderu. */
/* par VRLO uspravnih kadrova (npr. D2 most + nagrada, ar ~0.56): bez ovoga bi par bio viši
   od ekrana — ista visinska granica kao solo uspravne; usput podiže gustinu piksela nagrade */
.cs-row--pair-tall { max-width: calc(var(--cs-solo-h) * 1.125 + var(--cs-gap)); margin-inline: auto; }
/* par JEDNAKIH VISINA za slike razlicitih proporcija (bez reza): visina zajednicka,
   sirina svake sledi iz njenog --ar, par centriran kao celina (Mirage SC.03/04) */
.cs-row--pair-h { display: flex; gap: var(--cs-gap); justify-content: center; align-items: flex-start; }
.cs-row--pair-h .cs-fig { margin: 0; }
.cs-row--pair-h .cs-fig__media { height: var(--cs-solo-h); width: calc(var(--cs-solo-h) * var(--ar)); aspect-ratio: var(--ar); }
@media (max-width: 900px) {
  .cs-row--pair-h { flex-direction: column; align-items: center; }
  .cs-row--pair-h .cs-fig__media { height: auto; width: 100%; }
}
.cs-row--pair-r { grid-template-columns: 4fr 6fr; margin-top: clamp(2.5rem, 6vh, 4rem); }
.cs-row--pair-l { grid-template-columns: 6fr 4fr; }
.cs-row--pair { grid-template-columns: 1fr 1fr; }
/* v0.8.3: par native kadrova čiji se odnosi razlikuju (jednaka visina bi zahtevala rez, a
   rez je zabranjen): gornje ivice se poravnaju, rag ostaje dole gde ga natpis nosi. */
.cs-row--top { align-items: start; }
/* trio: tri uspravna filma u JEDNOM redu (Act II). Odluka vlasnika 2026-08-17:
   UVEK tačno tri kolone — fiksni `repeat(3, 1fr)`, nikad auto-fit/auto-fill, da se red
   ne prelomi na 2+1 (viđeno na tabletu). Visina filma sledi iz širine kolone i odnosa.
   Prelom na jedan po redu ide tek na uspravnom/uskom ekranu (dole, max-width 900). */
.cs-row--trio { grid-template-columns: repeat(3, 1fr); }
/* video u okviru figure se ponaša isto kao native slika — okvir već nosi --ar
   pa `cover` ne kropuje ništa, samo pokriva zaokruženi ugao */
.cs-fig__media video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }

/* grupe unutar čina (EXT zgrada / zajednički prostori / izložbeni stan / garaža...) */
.cs-group { margin-top: clamp(4.5rem, 10vh, 7rem); }
.cs-group:first-of-type { margin-top: 0; }
.cs-group__head { max-width: var(--cs-max); margin: 0 auto clamp(1.8rem, 4vh, 2.5rem); }
.cs-group__label { color: var(--accent); margin-bottom: 0.9rem; }
.cs-group__line { color: var(--grey); font-size: 1rem; max-width: 56ch; }

/* ---------- act II — film player ---------- */
.cs-player {
  position: relative;
  /* v0.8.2: PUNA KOLONA. Ograničenje izvedeno iz visine (media-h * 16/9) je pravilo
     četvrtu širinu na velikim ekranima (1529 vs 1560) — visina sledi iz širine. */
  max-width: var(--cs-max);
  margin-inline: auto;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px;
  background: #000;
}
.cs-player__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-player__veil { position: absolute; inset: 0; background: rgba(8,8,10,0.38); transition: background .3s; }
.cs-player__play, .cs-tour__enter {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem;
  background: none; border: 0; cursor: pointer; color: var(--paper);
}
.cs-player__play .mono, .cs-tour__enter .mono { color: rgba(255,255,255,0.88); letter-spacing: 0.18em; }
.cs-player__ring {
  width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  display: grid; place-items: center;
  background: rgba(0,0,0,0.28); backdrop-filter: blur(6px);
  transition: transform .3s, border-color .3s;
}
.cs-player:hover .cs-player__ring, .cs-tour__stage:hover .cs-player__ring { transform: scale(1.07); border-color: var(--accent); }
.cs-player__tri {
  width: 0; height: 0; margin-left: 5px;
  border-left: 17px solid var(--paper);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.cs-player.is-playing .cs-player__play,
.cs-player.is-playing .cs-player__veil,
.cs-player.is-playing .cs-player__loop { display: none; }
.cs-player__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ---------- act III — 360 tura ---------- */
/* virtuelna tura: puna kolona, kao i plejer (v0.8.2 — bez širine izvedene iz visine) */
.cs-tour { max-width: var(--cs-max); margin-inline: auto; }
.cs-tour__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #000; }
.cs-tour__stage > img { position: absolute; inset: 0; }
.cs-tour__badge { font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--paper); }
.cs-tour__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.cs-tour__stage.is-live .cs-tour__enter, .cs-tour__stage.is-live .cs-player__veil { display: none; }
.cs-tour__foot { margin-top: 1rem; color: var(--grey); }
.cs-tour__foot a { color: var(--paper); border-bottom: 1px solid var(--line); padding-bottom: 0.2em; transition: color .25s, border-color .25s; }
.cs-tour__foot a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- act IV — launch ---------- */
.cs-launch { max-width: var(--cs-max); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(3rem, 8vh, 5.5rem); }
.cs-web {
  display: block; overflow: hidden;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--canvas-2);
  transition: border-color .3s;
}
.cs-web:hover { border-color: var(--accent); }
.cs-web__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--line); }
.cs-web__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.cs-web__url { margin-left: 0.8rem; font-size: 0.6rem; letter-spacing: 0.14em; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-web__shot img { height: auto; }
.cs-web__foot { display: block; padding: 0.95rem 1.2rem; color: var(--grey); border-top: 1px solid var(--line); transition: color .25s; }
.cs-web:hover .cs-web__foot { color: var(--accent); }

/* ---------- horizontalni slajder (Act I enterijeri, booklet) ---------- */
/* Slajder ide od ivice do ivice ekrana, ALI prvi kadar (i glava slajdera) počinju
   na TAČNO istoj levoj ivici kao tekst iznad. --cs-edge se računa iz širine samog
   slajdera (100% = širina tela strane, bez scrollbara) — zato se poklapa u piksel
   sa centriranim .cs-act__head kontejnerom, što `100vw` ne bi (scrollbar). */
.cs-slider { max-width: none; margin: clamp(2.5rem, 6vh, 4rem) calc(-1 * var(--gutter)) 0; }
.cs-slider__head {
  max-width: calc(var(--cs-max) + 2 * var(--gutter)); margin: 0 auto 1.4rem;
  /* strelice slajdera stoje desno — staza ih drži ispred trake činova */
  padding: 0 calc(var(--gutter) + var(--rail-page, 0px)) 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.cs-slider__head .mono { color: var(--grey); }
.cs-slider__nav { display: flex; gap: 0.5rem; }
.cs-slider__nav button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  color: var(--paper); font-family: var(--font-mono); font-size: 0.95rem;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .25s, color .25s;
}
.cs-slider__nav button:hover { border-color: var(--accent); color: var(--accent); }
.cs-slider__track {
  --cs-edge: max(var(--gutter), calc((100% - var(--cs-max)) / 2));
  display: flex; gap: clamp(1rem, 2vw, 1.8rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: var(--cs-edge);
  scroll-padding-inline: var(--cs-edge);
  scrollbar-width: none;
  cursor: grab;
}
.cs-slider__track::-webkit-scrollbar { display: none; }
.cs-slider__track.is-dragging { cursor: grabbing; }
/* desktop: bez CSS snap-a (posle drag-a je pravio trzaj) — JS meko sleti na najbliži kadar */
@media (hover: hover) and (pointer: fine) {
  .cs-slider__track { scroll-snap-type: none; }
}
/* kadar se poravnava LEVOM ivicom (start), ne centrom — tako svaki korak strelice
   vraća sledeći kadar na istu liniju na kojoj počinje tekst iznad slajdera */
.cs-slide { flex: 0 0 auto; scroll-snap-align: start; margin: 0; --slide-h: var(--cs-media-h); }
/* Širina kadra se računa iz --ar na figuri, NE iz učitane slike: WebKit lazy slici
   koja još nije stigla daje širinu 0, pa se slajder pogrešno izmeri i strelice
   promaše kadar. --ar je tačan odnos originala → nema kropa ni letterboxa. */
.cs-slide img,
.cs-slide video {
  height: var(--slide-h);
  width: calc(var(--slide-h) * var(--ar));
  aspect-ratio: var(--ar);
  display: block; border-radius: 4px;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
.cs-slide video { background: #000; }
.cs-slide figcaption { margin-top: 0.8rem; color: var(--grey); }
/* v37: booklet veći od opšteg slajdera (korisnik) — sopstveni visinski cap, a traka ide
   OD IVICE DO IVICE ekrana (korisnikova skica 2026-08-17): bez kolonskog uvlačenja. */
.cs-slider--booklet .cs-slide { --slide-h: clamp(300px, calc(92svh - 5rem), 920px); }
.cs-slider--booklet .cs-slider__track { --cs-edge: 0px; }
.cs-slider--booklet .cs-slide img { border: 1px solid var(--line); }

/* ---------- act II — drone unit ---------- */
/* v0.8.2: kolone su 1fr 1fr sa --cs-gap, pa je kadar TAČNO pola kolone (--cs-half) —
   ista mera kao svaki par u galeriji. Bez toga je 5fr/6fr pravio sopstvenu širinu. */
.cs-drone {
  max-width: var(--cs-max); margin: clamp(4rem, 10vh, 7rem) auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--cs-gap);
  align-items: center;
}
.cs-drone__label { margin-bottom: 1.6rem; }
.cs-drone__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem); line-height: 1.02;
  margin-bottom: 1.4rem;
}
.cs-drone__title em { color: var(--accent); }
.cs-drone__body p { color: var(--grey); font-size: 1.02rem; max-width: 48ch; margin-bottom: 1rem; }
.cs-drone__media {
  width: 100%; /* = pola kolone; visina sledi iz odnosa */
  aspect-ratio: var(--ar, 9 / 13);
  overflow: hidden; border-radius: 4px;
}
.cs-drone__media img { object-position: 50% 40%; } /* Hram u gornjoj trećini kadra */
.cs-drone__fig figcaption { margin-top: 0.9rem; color: var(--grey); padding-right: var(--rail-vw, 0px); }
/* pogled sa terase — panorame iz istog dron snimanja, preko obe kolone */
.cs-drone__wide { grid-column: 1 / -1; margin: clamp(1.5rem, 4vh, 2.5rem) 0 0; }
.cs-drone__wide-media { width: 100%; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 4px; }
.cs-drone__wide figcaption { margin-top: 0.9rem; color: var(--grey); }

/* ---------- delivered + next ---------- */
.cs-delivered { position: relative; z-index: 3; background: var(--canvas); border-top: 1px solid var(--line); padding: clamp(4rem, 9vh, 6rem) var(--gutter); }
.cs-delivered__label { max-width: var(--cs-max); margin: 0 auto 2.2rem; }
.cs-delivered__grid { max-width: var(--cs-max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.cs-delivered__grid > div { border-top: 1px solid var(--line); padding-top: 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.cs-delivered__act { color: var(--accent); }
.cs-delivered__grid span:last-child { color: var(--grey); line-height: 1.9; }

.cs-next {
  display: block; position: relative; z-index: 3;
  background: var(--canvas); border-top: 1px solid var(--line);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
}
.cs-next__label { max-width: 1240px; margin: 0 auto 1.2rem; }
.cs-next__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1;
  max-width: 1240px; margin: 0 auto;
  transition: color .3s;
}
.cs-next__title em { color: var(--accent); font-style: normal; }
.cs-next:hover .cs-next__title { color: var(--accent); }

/* ---------- zatvaranje case strane: CTA + related produkcije ---------- */
.cs-cta, .cs-related {
  position: relative; z-index: 3;
  background: var(--canvas); border-top: 1px solid var(--line);
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
}
.cs-cta__inner, .cs-related__inner { max-width: var(--cs-max); margin: 0 auto; }
.cs-cta__label { color: var(--accent); margin-bottom: 1.5rem; }
.cs-cta__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1;
  margin-bottom: 1.4rem;
}
.cs-cta__line { color: var(--grey); font-size: 1.05rem; max-width: 48ch; margin-bottom: clamp(2rem, 4vh, 2.8rem); }

.cs-related__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem 2.5rem; flex-wrap: wrap;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.cs-related__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1;
}
.cs-related__all { color: var(--grey); border-bottom: 1px solid var(--line); padding-bottom: 0.4em; transition: color .25s, border-color .25s; }
.cs-related__all:hover, .cs-related__all:focus-visible { color: var(--accent); border-color: var(--accent); }
.cs-related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
/* KARTICA je navigacija, ne galerijski kadar — ovde je krop dozvoljen (16:10 okvir) */
.cs-related__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--canvas-2); }
.cs-related__media img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.cs-related__card:hover .cs-related__media img,
.cs-related__card:focus-visible .cs-related__media img { transform: scale(1.045); }
.cs-related__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1;
  margin: 1.3rem 0 0.6rem;
  transition: color .3s;
}
.cs-related__card:hover .cs-related__name,
.cs-related__card:focus-visible .cs-related__name { color: var(--accent); }
.cs-related__meta { color: var(--accent); }
@media (max-width: 700px) {
  .cs-related__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* na uskom ekranu kadar visok 88svh bi bio širi od ekrana (portret ~0.75) i
     gledalac bi video samo isečak — zato niža mera medija */
  :root { --cs-media-h: clamp(260px, 66svh, 600px); }
  /* donji prostor mora da propusti fiksnu traku činova (.actnav) — bez ovoga se
     poslednji red meta linije prelama POD traku i podatak se ne vidi */
  .cs-hero { padding-bottom: 8rem; }
  .cs-hero__media img,
  .cs-hero__media video { object-position: 30% 50%; }
  /* v37: Twins hero je SIMETRICAN par vila oko centra — 30% bi pokazao samo levu vilu,
     centar drži obe vile i procep sa morem (sudijski nalaz: „vidi se jedna vila") */
  body[data-cf="work-twins"] .cs-hero__media img,
  body[data-cf="work-twins"] .cs-hero__media video { object-position: 50% 50%; }
  /* v37: booklet slajd ne sme biti širi od ekrana (kvadrat --ar:1 bi na 390 pravio
     letterbox prazninu) — širina vodi na uskim ekranima */
  .cs-slider--booklet .cs-slide { --slide-h: min(calc(92svh - 5rem), calc(100vw - 2 * var(--gutter))); }
  .cs-brief__grid { grid-template-columns: 1fr; }
  .cs-row--pair-r, .cs-row--pair-l, .cs-row--pair, .cs-row--trio { grid-template-columns: 1fr; }
  /* native kadrovi zadržavaju svoj odnos i na mobilu — inače bi ih ova dva
     pravila ponovo iskropovala (DOGOVOR 2026-08-17: slike se NE kropuju) */
  .cs-fig--full:not(.cs-fig--native) .cs-fig__media { aspect-ratio: 4 / 3; }
  .cs-fig--wide:not(.cs-fig--native) .cs-fig__media { aspect-ratio: 16 / 10; }
  .cs-player__ring { width: 72px; height: 72px; }
  .cs-player__play .mono, .cs-tour__enter .mono { padding: 0 1.5rem; text-align: center; }
  .cs-drone { grid-template-columns: 1fr; }
  .cs-drone__wide-media { aspect-ratio: 16 / 10; }
  .cs-delivered__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   STUDIO — studio.html
   ============================================================ */
/* crew model: tekst + lista disciplina */
.st-crew {
  max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter);
  display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
.st-crew__label { margin-bottom: 1.8rem; }
.st-crew__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem); line-height: 1.04;
  margin-bottom: 1.8rem;
}
.st-crew__title em { color: var(--accent); }
.st-crew__body p:not(.mono) { color: var(--grey); font-size: 1.05rem; max-width: 54ch; margin-bottom: 1.1rem; }
.st-crew__list { border-top: 1px solid var(--line); margin-top: 0.4rem; }
.st-crew__list div {
  padding: 1.15em 0.1em; border-bottom: 1px solid var(--line);
  color: var(--paper); opacity: 0.85;
}

.st-founder {
  max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter);
  display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
.st-portrait { margin: 0; }
.st-portrait__media {
  aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line);
}
.st-portrait figcaption { margin-top: 0.9rem; color: var(--grey); }

/* method — proces u svc redovima (isti sistem kao services lista) */
.st-method {
  background: var(--canvas-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(5rem, 12vh, 8rem) var(--gutter);
}
.st-method__head { max-width: 1240px; margin: 0 auto clamp(3rem, 7vh, 4.5rem); }
.st-method__label { margin-bottom: 1.8rem; }
.st-method__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02;
  margin-bottom: 1.6rem;
}
.st-method__title em { color: var(--accent); }
.st-method__lead { color: var(--grey); font-size: 1.05rem; max-width: 58ch; }
.st-method__list { max-width: 1240px; margin: 0 auto; }
.st-founder__label { margin-bottom: 1.8rem; }
.st-founder__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem); line-height: 1.04;
  margin-bottom: 1.8rem;
}
.st-founder__title em { color: var(--accent); }
.st-founder__body p:not(.mono) { color: var(--grey); font-size: 1.05rem; max-width: 58ch; margin-bottom: 1.1rem; }
.st-founder__ig { margin-top: 1.2rem; }

.st-statement {
  background: var(--canvas-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(5rem, 12vh, 8rem) var(--gutter);
}
.st-statement__label { max-width: 1240px; margin: 0 auto 2rem; }
.st-statement__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.4rem, 5.5vw, 4.8rem); line-height: 1.02;
  max-width: 1240px; margin: 0 auto 1.8rem;
}
.st-statement__title em { color: var(--accent); }
.st-statement__body {
  max-width: 1240px; margin: 0 auto; color: var(--grey); font-size: 1.05rem;
  padding-right: clamp(0rem, 20vw, 24rem); /* tekst ne ide punom širinom — editorial mera */
}

.st-values { padding: clamp(5rem, 12vh, 8rem) var(--gutter); }
.st-values__label { max-width: 1240px; margin: 0 auto 3rem; }
.st-values__grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem);
}
.st-value { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.st-value__no { color: var(--accent); display: block; margin-bottom: 1rem; }
.st-value__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.05;
  margin-bottom: 1rem;
}
.st-value__desc { color: var(--grey); font-size: 1rem; max-width: 36ch; }

/* klijenti traka (v33) — spori marquee logoa; monohrom verzije u assets/clients */
.logostrip {
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 6vh, 4rem) 0;
  overflow: hidden;
}
.logostrip__label { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto 2.6rem; padding: 0 var(--gutter); }
.logostrip__track { display: inline-flex; white-space: nowrap; will-change: transform; }
.logostrip__set {
  display: inline-flex; align-items: center;
  gap: clamp(3rem, 6vw, 5.5rem);
  padding-right: clamp(3rem, 6vw, 5.5rem); /* razmak i na spoju petlje */
}
.logostrip__set img {
  height: 40px; width: auto; display: inline-block;
  opacity: 0.6; transition: opacity .3s;
}
.logostrip__set img:hover { opacity: 1; }
.logostrip__nda {
  border: 1px dashed color-mix(in srgb, var(--paper) 30%, transparent);
  border-radius: 99px;
  padding: 0.7em 1.5em;
  font-size: 0.6rem; letter-spacing: 0.22em;
  color: var(--grey);
}
@media (max-width: 900px) { .logostrip__set img { height: 32px; } }

.st-strip { border-top: 1px solid var(--line); padding: clamp(3rem, 7vh, 5rem) var(--gutter); }
.st-strip__row {
  max-width: 1240px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding: 1.1em 0; border-bottom: 1px solid var(--line);
}
.st-strip__row:last-child { border-bottom: 0; }
.st-strip__key { color: var(--accent); }
.st-strip__row .is-muted { opacity: 0.5; }

@media (max-width: 900px) {
  .st-founder, .st-crew { grid-template-columns: 1fr; }
  .st-portrait__slate { aspect-ratio: 4 / 5; max-width: 420px; }
  .st-values__grid { grid-template-columns: 1fr; gap: 2rem; }
  .st-statement__body { padding-right: 0; }
  .st-strip__row { flex-direction: column; gap: 0.4rem; }
}
/* telefon: donja mera clamp-a (2.2–2.4rem) je duge reči („Understanding", „collaborators")
   vodila 2–16px PREKO desnog gutter-a (panel: naslov 4px od fizičke ivice ekrana) —
   na uskom ekranu display mera prati širinu, pa red uvek ostaje u šini */
@media (max-width: 480px) {
  .st-statement__title, .st-method__title { font-size: clamp(1.8rem, 8.4vw, 2.4rem); }
  .st-crew__title, .st-founder__title { font-size: clamp(1.8rem, 8.4vw, 2.2rem); }
}

/* ============================================================
   WORK — mozaik najboljih kadrova i videa (work.html)
   Svaki red: 3–4 stavke različitih razmera; flex-grow = aspect ratio
   pa red uvek puni celu širinu a visine se same izjednače.
   ============================================================ */
/* v35.1: 2-kolone masonry sa EKSPLICITNIM kolonama (.mz-col).
   NE koristiti `columns: 2` — Safari i Chrome razlicito balansiraju CSS kolone, pa je
   isti kod davao potpuno drugaciji raspored na iPad-u (kuriran redosled je padao). */
.mz {
  --mz-gap: clamp(0.6rem, 1vw, 1rem);
  padding: clamp(1.5rem, 4vh, 3rem) var(--mz-gap) clamp(5rem, 12vh, 9rem);
}
.mz-grid { display: flex; align-items: flex-start; gap: var(--mz-gap); }
.mz-col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--mz-gap);
}
.mz-item {
  position: relative;
  margin: 0;
  width: 100%; display: block;
  aspect-ratio: var(--ar);
  overflow: hidden; border-radius: 3px;
  cursor: pointer;
}
.mz-item img, .mz-item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s cubic-bezier(.22,1,.36,1);
}
.mz-item:hover img, .mz-item:hover video { transform: scale(1.03); }
.mz-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4rem 0.9rem 0.85rem;
  background: linear-gradient(180deg, transparent, rgba(8,8,10,0.74));
  color: rgba(255,255,255,0.92);
  font-size: 0.68rem;
  opacity: 0; transition: opacity .3s;
}
.mz-item:hover figcaption { opacity: 1; }
@media (hover: none) { .mz-item figcaption { opacity: 1; } }
.mz-badge {
  position: absolute; top: 0.8rem; right: 0.9rem;
  color: rgba(255,255,255,0.9); font-size: 0.56rem;
  background: rgba(8,8,10,0.5); border-radius: 99px; padding: 0.4em 0.9em;
  backdrop-filter: blur(4px);
}
/* uski telefoni: jedna kolona (dve kolone landscape kadrova postanu premale).
   `display: contents` rasformira kolone pa kadrovi teku redom iz koda. */
@media (max-width: 600px) {
  .mz-grid { display: block; }
  .mz-col { display: contents; }
  .mz-item { margin: 0 0 var(--mz-gap); }
}

/* lightbox — klik na kadar otvara veliku verziju sa tekstom */
.mz-lightbox {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(8, 8, 10, 0.94);
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; padding: clamp(1rem, 4vw, 3rem);
  /* v37: gest u galeriji ne sme da skroluje stranu iza (iOS ignoriše body overflow) —
     horizontalni swipe hvata JS (prethodni/sledeći) */
  touch-action: none; overscroll-behavior: contain;
}
.mz-lightbox.is-open { display: flex; }
.mz-lightbox__stage img, .mz-lightbox__stage video {
  max-width: min(92vw, 1400px); max-height: 76vh;
  width: auto; height: auto; display: block; border-radius: 4px;
}
.mz-lightbox__caption { color: var(--paper); opacity: 0.85; text-align: center; }
.mz-lightbox__close {
  position: absolute; top: 1.2rem; right: 1.4rem;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  color: var(--paper); font-family: var(--font-mono); font-size: 0.9rem;
  cursor: pointer; display: grid; place-items: center;
  transition: border-color .25s, color .25s;
}
.mz-lightbox__close:hover { border-color: var(--accent); color: var(--accent); }
/* prev/next strelice — isti krug kao close, vertikalno centrirane */
.mz-lightbox__prev, .mz-lightbox__next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(8,8,10,0.5);
  color: var(--paper); font-family: var(--font-mono); font-size: 0.95rem;
  cursor: pointer; display: grid; place-items: center;
  transition: border-color .25s, color .25s;
}
.mz-lightbox__prev { left: 1.4rem; }
.mz-lightbox__next { right: 1.4rem; }
.mz-lightbox__prev:hover, .mz-lightbox__next:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 900px) {
  .mz-lightbox__prev { left: 0.7rem; }
  .mz-lightbox__next { right: 0.7rem; }
}

/* ============================================================
   CAREERS — casting call
   ============================================================ */
.cr-roles { padding: clamp(2rem, 6vh, 4rem) var(--gutter) clamp(5rem, 12vh, 8rem); }
.cr-roles__label { max-width: 1240px; margin: 0 auto 2.5rem; }
.cr-roles__list { max-width: 1240px; margin: 0 auto; }

.cr-submit {
  background: var(--canvas-2);
  border-top: 1px solid var(--line);
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
}
.cr-submit__grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
.cr-form { gap: 1.7rem; }
.cr-form .cr-submit__note a { color: var(--paper); transition: color .25s; }
.cr-form .cr-submit__note a:hover { color: var(--accent); }
.cr-submit__label { margin-bottom: 1.8rem; }
.cr-submit__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-opsz);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02;
  margin-bottom: 1.6rem;
}
.cr-submit__title em { color: var(--accent); }
.cr-submit__body { color: var(--grey); font-size: 1.05rem; max-width: 48ch; }
.cr-submit__action { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; justify-self: end; }
.cr-submit__note { opacity: 0.7; }
@media (max-width: 900px) {
  .cr-submit__grid { grid-template-columns: 1fr; }
  .cr-submit__action { justify-self: start; }
}

/* ---------- footer ---------- */
/* v0.8.2: sadržaj futera drži ISTU levu/desnu liniju kao ostatak strane — pravilo margina
   važi svuda (prijava: sadržaj na 340px, futer na 64px pri 1920). --page-measure je mera
   te strane: podrazumevano --measure (1240), na case stranama --cs-max (1560). */
.footer {
  position: relative; z-index: 3; background: var(--canvas);
  border-top: 1px solid var(--line);
  padding-block: 4rem 5.5rem;
  padding-inline: max(var(--gutter), calc((100% - var(--page-measure, var(--measure))) / 2));
  /* v39: visina CF znaka u futeru — od nje se računa i optička korekcija margina */
  --fl-h: clamp(104px, 11vw, 140px);
}
body[data-cf^="work-"] { --page-measure: var(--cs-max); }
.footer__logo { font-weight: 300; font-size: 1.3rem; letter-spacing: 0.08em; margin-bottom: 3rem; }
.footer__logo b { font-weight: 800; }
/* v37: pravi CF znak (monogram + ispis u slici) menja tekstualni logotip u futeru.
   v40 (skica vlasnika): logo je PRVA ĆELIJA istog reda kao kolone (ne stoji više iznad
   njih), a red se razvlači od leve do desne margine sadržaja. PNG nosi ~11% praznine
   gore/dole i ~6% levo (alpha bbox 52,94 → 707,730 na 824²); negativne margine tu
   prazninu poništavaju, pa znak sedi flush na levoj liniji strane i po vrhu na istoj
   liniji kao prvi red teksta u kolonama. Sliku ne kropujemo i ne filtriramo. */
.footer__logo-img {
  height: var(--fl-h); width: auto;
  margin-top: calc(var(--fl-h) * -0.114);
  margin-left: calc(var(--fl-h) * -0.063);
  margin-bottom: calc(var(--fl-h) * -0.114);
}
/* 0.3rem = optička korekcija: mono red ima ~5px vazduha nad verzalom, logo nema */
.footer__brand { padding-top: 0.3rem; }
.footer__cols {
  display: grid; grid-template-columns: repeat(4, max-content);
  justify-content: space-between; align-items: start;
  gap: clamp(1.2rem, 3vw, 3rem); margin-bottom: 4rem;
}
.footer__cols p { margin-bottom: 0.9em; }
/* v39: SAV tekst u futeru je iste boje (--grey, bez opacity trikova — stara
   .footer__fin opacity 0.6 je davala ~3.8:1 kontrasta i padala AA). Hover = akcenat. */
.footer__cols a { transition: color .3s ease; }
.footer__cols a:hover, .footer__cols a:focus-visible { color: var(--accent); }
.footer__fin { color: var(--grey); }
@media (max-width: 700px) {
  .footer__cols { grid-template-columns: 1fr; justify-content: start; gap: 2rem; }
  .footer__brand { padding-top: 0; }
}

/* ---------- hero standalone leži IZNAD canvasa ---------- */
.hero { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fs { opacity: 1 !important; visibility: visible !important; position: relative; padding-top: 4rem; padding-bottom: 4rem; }
  .film-container { height: auto; }
  .canvas-wrap { position: relative; height: 60vh; opacity: 1; clip-path: none; }
}