/* ==============================================
   MINT DESIGN STUDIO — Main Stylesheet
   Style replicates the Parapet site (Salient theme),
   adapted to the MINT brand.
   ============================================== */

/* ============== VOLTERRA (display font) ==============
   Lokalni serifni display font koji se koristi za sve naslove
   (split-heading, stack-title, service/value naslovi, statistike i sl.)
   i svuda gdje je tekst velik (PROJEKTI, O NAMA, USLUGE itd.).
   Volterra je font logoa — koristeći ga za naslove dobijamo
   jedinstven brand glas kroz cijeli sajt. */
@font-face {
  font-family: 'Volterra';
  src: url('../fonts/Volterra-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Volterra';
  src: url('../fonts/Volterra-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ============== RALEWAY (body / description font) ==============
   Lokalni sans-serif za opise projekata, biografiju, opise usluga
   i generalno za tijelo teksta ispod naslova. Variable font pokriva
   cio opseg težina (100–900) u jednoj datoteci. */
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Variable.woff2') format('woff2-variations'),
       url('../fonts/Raleway-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Italic-Variable.woff2') format('woff2-variations'),
       url('../fonts/Raleway-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============== SILK SERIF (legacy) ==============
   Zadržano za FOOTER i specifične elemente koji ne smiju mijenjati
   čitljivost (po zahtjevu klijenta — meni i podnožje ostaju kao
   prije). Učitava se "kao raniji" font samo na ovim lokalnim
   scope-ovima preko --font-display-legacy / --font-body-legacy. */
@font-face {
  font-family: 'Silk Serif';
  src: url('../fonts/SilkSerif-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silk Serif';
  src: url('../fonts/SilkSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silk Serif';
  src: url('../fonts/SilkSerif-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silk Serif';
  src: url('../fonts/SilkSerif-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Silk Serif';
  src: url('../fonts/SilkSerif-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* MINT brand palette
     ----------------------------------------------------------------
     Boja koja se najviše vidi je --mint-cream (topla bež) — to je
     pozadina cijelog sajta. --mint-sage (mint zelena) je akcent boja
     i koristi se ZA GORNJI HEADER bar i za detalje (selekcija, scroll
     bar, fokus). Forma i CTA paneli koriste --mint-cream-deep,
     malo tamniju bež nijansu, da se vizuelno odvoje a ostanu unutar
     iste familije boja. */
  --mint-sage: #B5C4B0;          /* mint zelena — sada akcent (header bar) */
  --mint-sage-deep: #95A78D;     /* dublji sage za hover */
  --mint-cream: #EFE9DF;         /* topla bež — GLAVNA pozadina sajta */
  --mint-cream-soft: #F5F1E8;    /* svjetlija bež za form polja */
  --mint-cream-deep: #E4DCCE;    /* tamnija bež za form panel, CTA strip */
  --mint-ink: #1A1A1A;           /* near-black za tekst/kartice */
  --mint-ink-soft: #2C2C2C;
  --mint-white: #FFFFFF;
  --mint-muted: #6B6B6B;
  --mint-line: rgba(26, 26, 26, 0.12);

  /* Layout */
  --container-padding: 40px;
  --grid-gap: 40px;
  --radius: 25px;
  --nav-h: 80px;

  /* Elegant 3D-feel card shadow — koristi je kartica sa projektima
     na svim sticky stack ekranima, plus service / value / inquiry
     paneli. Dvostruka sjenka (široka + tanka) ima topliji "lift" feel
     nego jednostruki shadow. */
  --shadow-card:
    0 24px 60px -22px rgba(26, 26, 26, 0.30),
    0 8px 22px -14px rgba(26, 26, 26, 0.16);
  --shadow-card-hover:
    0 38px 80px -22px rgba(26, 26, 26, 0.36),
    0 12px 28px -14px rgba(26, 26, 26, 0.20);
  --shadow-panel:
    0 18px 50px -22px rgba(26, 26, 26, 0.22),
    0 6px 16px -10px rgba(26, 26, 26, 0.10);

  /* Type
     ----------------------------------------------------------------
     --font-display  → Volterra: za naslove i SVE veliko (PROJEKTI,
                       O NAMA, USLUGE, hero, split-heading…).
     --font-elegant  → Cormorant Garamond: ITALIC pull-quote ("Vjerujemo…"),
                       biografije, podnaslovi (Osnivač), step naslovi
                       (Intencija…) i kontakt vrijednosti (email/IG/lokacija).
                       Garamond porodica je u istoj serifskoj liniji kao
                       Volterra ali sa nižim kontrastom — čitljivo na
                       srednjim/malim veličinama gdje display Volterra
                       postaje teško za čitanje.
     --font-body     → Raleway: za opise projekata, biografiju, opise
                       usluga — sve tijelo teksta ispod naslova.
     --font-nav      → Inter: zadržano za NAVIGACIJU i FOOTER da bi
                       ostali čitljivi (eksplicitan zahtjev klijenta).
     --font-display-legacy → Silk Serif za footer brand h2 (heritage)
     ---------------------------------------------------------------- */
  --font-display: 'Volterra', 'Silk Serif', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-elegant: 'Cormorant Garamond', 'Silk Serif', 'Times New Roman', Georgia, serif;
  --font-body: 'Raleway', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-nav: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-display-legacy: 'Silk Serif', 'Cormorant Garamond', 'Times New Roman', serif;
}

/* ============== RESET + BASE ============== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: auto; /* using JS smooth scroll */
  /* iOS Safari rubber-band / overscroll boja: ako bi html bio bijel,
     pri "vučenju" stranice ispod sadržaja vidjelo bi se bijelo. Sa
     viewport-fit=cover content se proteže pod address bar, pa je
     važno da i html ima istu bež boju kao body za vizuelnu kontinuitu. */
  background: var(--mint-cream);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mint-ink);
  /* Pozadina cijelog sajta — topla bež. Gornji header bar (mint) sjedi
     preko nje. Ovaj redoslijed boja je inverzan starom (gdje je tijelo
     bilo mint, a footer cream) — sada je mint koncentrisan u gornjem
     header band-u, a sve ostalo "diše" u bež tonu. */
  background: var(--mint-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.5s ease, color 0.5s ease;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ============== PAGE TRANSITION ==============
   Quiet opacity crossfade. The page-content fades out on its way out,
   the new page fades in on arrival. No gradient sweep, no curtain — the
   cream body background covers the brief gap during the network jump.
   The .page-transition element from partials.js is intentionally left
   inert (no animation, no visual) so the existing markup stays valid. */
.page-transition {
  display: none;
}

/* ============== INTRO LOADER ==============
   Full-screen splash shown on the very first visit per browser session.
   Multi-phase: (1) "Loading … 0%" countdown on bež pozadini, then (2)
   peek card slides up from below sa istim ivičnim razmacima kao prave
   stack kartice, (3) logo "zoom" u centru, i (4) scroll-driven morph
   gdje logo elegantno klizi u gornji-lijevi cošak, glavni meni se fade
   in u gornjem-desnom, kartice se elegantno povlače gore, i top bar
   prelazi u mint nijansu. Detaljna logika je u main.js.
   ============================================== */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;          /* iznad page-transition (9999) i header (100) */
  background: var(--mint-cream);   /* topla bež — kao archimalin */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* === STAGE — centralni stage koji drži logo + procenat === */
.site-loader .intro-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centriran preko cijelog viewporta. Transforms idu ovdje kada se
     pokrene "morph" — ne na samom logo elementu (jer logo dijeli
     stilove sa kasnijim home logom u headeru). */
  transform-origin: center center;
  transition:
    transform 1.05s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.6s ease;
}

/* === LOGO (img) ===
   Početni state: opacity 0, blago "spušten" za 10px. Tranzicija u
   .is-entered state (JS dodaje tu klasu odmah po učitavanju) daje
   mekan ulazak. Koristimo TRANSITION (ne @keyframes animation:forwards)
   jer @keyframes sa forwards-fill drži vrijednosti na "animation
   cascade level" — što kasnije sprječava .phase-morph rule da
   istisne transform vrijednost i pokrene tranziciju ka header
   poziciji. Transition-based entry rješava taj problem clean. */
.site-loader-logo {
  display: block;
  /* "Mali" centar (početna veličina) — kao u archimalin početnoj fazi */
  width: clamp(180px, 22vw, 300px);
  height: auto;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity   0.7s  cubic-bezier(0.25, 1, 0.5, 1) 0.15s,
    transform 0.7s  cubic-bezier(0.25, 1, 0.5, 1) 0.15s;
}
.site-loader-logo.is-entered {
  opacity: 1;
  transform: translateY(0);
}

/* === PROCENAT — sjedi ispod loga tokom prve faze === */
.site-loader .intro-percent {
  display: block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--mint-ink);
  opacity: 0;
  animation: introPercentIn 0.5s ease 0.6s forwards;
  font-variant-numeric: tabular-nums;     /* da brojevi ne "trzaju" */
}
@keyframes introPercentIn { to { opacity: 0.85; } }

/* === BOČNE OZNAKE (Loading / in progress) === */
.site-loader .intro-side-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--mint-ink);
  opacity: 0;
  animation: introSideIn 0.55s ease 0.35s forwards;
  pointer-events: none;
}
.site-loader .intro-side-label--left  { left: clamp(28px, 5vw, 70px); }
.site-loader .intro-side-label--right { right: clamp(28px, 5vw, 70px); }
@keyframes introSideIn { to { opacity: 0.75; } }

/* Loading-faza je gotova → bočne labele i procenat fade out */
.site-loader.phase-done-load .intro-side-label,
.site-loader.phase-done-load .intro-percent {
  animation: introSideOut 0.45s ease forwards;
}
@keyframes introSideOut { to { opacity: 0; transform: translateY(-50%) translateY(-6px); } }
.site-loader.phase-done-load .intro-percent {
  /* override: nema -50% translatea na procentu */
  animation: introPercentOut 0.45s ease forwards;
}
@keyframes introPercentOut { to { opacity: 0; transform: translateY(-8px); } }

/* === PEEK KARTICA — klizi odozdo, sa istim bočnim razmacima
   kao prava stacked kartica (40px sa obje strane). Vizuelno
   "doviruje" kao u archimalin snimku.

   KLIJENTSKA ISPRAVKA v4: peek kartica sada nosi ISTI cream
   "passe-partout" frame kao prave stacked kartice (background,
   border, shadow, 14px inset za sliku) — ranije je peek bila samo
   gola slika sa zaobljenim uglovima, pa se ram "pojavljivao" tek
   kad bi pravu stacked karticu zamijenila tokom morf faze. Sad
   peek već nosi finalni izgled, pa korisnik vidi ram od prvog
   trenutka kad kartica klizne odozdo. === */
.site-loader .intro-peek-card {
  position: absolute;
  left: var(--container-padding);
  right: var(--container-padding);
  /* visina otprilike kao prava stacked kartica, ali pomjerena 60%
     ispod viewporta → 40% kartice se nazire */
  bottom: -52vh;
  height: 75vh;
  min-height: 480px;
  border-radius: var(--radius);
  overflow: hidden;
  /* Frame — identičan kao .stack-inner: cream-soft pozadina, suptilan
     tamni border i polaroid-style sjenka sa inset white highlight. */
  background: var(--mint-cream-soft);
  border: 1px solid rgba(26, 26, 26, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 24px 60px -22px rgba(26, 26, 26, 0.34),
    0 10px 24px -14px rgba(26, 26, 26, 0.20);
  /* Početno skriveno, klizi gore kad krene faza "peek" */
  opacity: 0;
  /* GSC/CLS fix: kartica se pomjera preko transform:translateY
     (kompozitovana animacija) umjesto bottom tranzicije. bottom ostaje
     fiksan na -52vh; svi pomaci su delta u odnosu na tu bazu. */
  transition:
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease;
  will-change: transform, opacity;
  pointer-events: none;
}
.site-loader.phase-peek .intro-peek-card {
  /* bilo: bottom -52vh -> -42vh; sada isti pomak od 10vh naviše kroz transform */
  transform: translateY(-10vh);
  opacity: 1;
}
/* Slika unutar peek kartice — inset 14px sa svih strana, isto kao
   .stack-image-wrap u stacked karticama, tako da cream frame ostane
   vidljiv oko slike. */
.site-loader .intro-peek-card img {
  position: absolute;
  top: 14px;
  left: 14px;
  /* v19.2: ranije bilo right:14, bottom:14 + width:auto, height:auto —
     ali kombinacija absolute positioning + sva 4 offset-a + width:auto
     na replaced element (IMG) interpretira kao "koristi prirodnu širinu
     slike", pa se 16:9 cover slika renderovala 16:9 zalijepljena na
     vrhu kartice, ignorišući right/bottom offset-e. object-fit:cover
     se onda primjenjivao na pogrešno-veličinu box, kropujući samo
     donji dio prirodnog renderera. Eksplicitne width/height u calc-u
     forsiraju box dimensions = parent minus 28px na obje ose, pa
     object-fit:cover ispravno kropuje sliku da popuni cijeli ram —
     identično kako se renderuju prave stacked kartice ispod. */
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  object-fit: cover;
  object-position: center;
  border-radius: calc(var(--radius) - 16px);
  clip-path: inset(0 round calc(var(--radius) - 16px));
}
/* Suptilni gradijent na dnu peek kartice — sada takođe insetnut
   da prati sliku unutar frame-a (a ne da pokrije sam cream frame). */
.site-loader .intro-peek-card::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  border-radius: calc(var(--radius) - 16px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

/* === ZOOM faza — logo postaje VEĆI (kao archimalin) i sjedi
   iznad peek kartice koja se i dalje vidi pri dnu === */
.site-loader.phase-zoom .site-loader-logo {
  /* GSC/CLS fix: zoom sada ide preko transform:scale (kompozitovana,
     GPU animacija) umjesto width tranzicije. --zoom-scale postavlja JS
     u enterZoomPhase() tako da vizuelna širina ostane identična starom
     clamp(380px, 56vw, 820px). Layout width ostaje početni clamp —
     FLIP morph math u main.js koristi offsetWidth (layout, bez
     transforma) pa landing na header logo ostaje precizan. */
  transform: scale(var(--zoom-scale, 2.55));
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.site-loader.phase-zoom .intro-stage {
  /* malo se podigne uvis da napravi mjesta peek kartici (koja viri
     ~33vh odozdo) i scroll hint-u između njih */
  transform: translateY(-14vh);
}

/* === SCROLL HINT — diskretan tekst koji se pojavi nakon zoom faze,
   znak korisniku da skroluje. Pozicioniran malo IZNAD peek kartice
   (peek kartica viri ~33vh odozdo, hint sjedi ~36vh od dna da bude
   jasno odvojen i ostane vidljiv na bež pozadini). === */
.site-loader .intro-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(33vh + 16px);
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--mint-ink);
  opacity: 0;
  transition: opacity 0.6s ease 0.4s;
  pointer-events: none;
  animation: scrollHintPulse 2.2s ease-in-out 1.2s infinite;
}
.site-loader.phase-zoom .intro-scroll-hint { opacity: 0.6; }
@keyframes scrollHintPulse {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50%      { transform: translateX(-50%) translateY(4px); opacity: 0.85; }
}

/* === MORPH FAZA — pokrenuta prvim scroll-om (FLIP tehnika).
   Logo elegantno klizi u gornji-lijevi cošak (tačno na poziciju gdje
   sjedi pravi header logo — JS izmjeri tu poziciju i postavi
   --morph-tx / --morph-ty / --morph-scale custom properties prije
   nego što ovde dodamo .phase-morph klasu). Peek kartica klizi naviše
   do svoje "stack" pozicije.

   "CURTAIN REVEAL" pristup: cream BG i peek kartica OSTAJU PUNI
   (opaque) tokom cijele morph faze. Nema progresivnog BG fade-a tokom
   leta. Na samom kraju (finishMorph u main.js okida atomic swap),
   cijeli loader postaje nevidljiv U JEDNOM FRAME-U — i tek tada se
   pravi sajt otkriva ispod.

   Razlog za ovaj pristup: kada smo prije imali BG fade tokom leta
   (background-color rgba 0.65s sa delay 0.4s), prave stacked kartice
   iza loader-a su postajale postepeno vidljive DOK je peek kartica još
   uvijek bila na pola puta uvis. Korisnik je vidio "fantomske" stacked
   kartice koje se materijalizuju iza peek-a — što je čitalo kao
   reload osjećaj (kao da sajt učitava sadržaj usred animacije).
   Sa curtain reveal pristupom, prave kartice nikad nisu vidljive
   tokom leta — vidi se samo cream BG sa peek-om i logo-m, i tek na
   samom kraju "zavjesa pada" otkrivajući sajt. === */
.site-loader.phase-morph {
  /* BG OSTAJE cream tokom cijele morph faze. Na kraju (finishMorph)
     loader dobija opacity:0 INSTANTNO, pa nema potrebe za fade-om ovdje. */
}
.site-loader.phase-morph .site-loader-logo {
  /* Pošto entry više nije @keyframes animation (već transition na .is-entered
     klasi), ne moramo da koristimo animation: none za otpuštanje cascade
     hold-a. Sada se transform mijenja iz prethodne vrijednosti
     (translateY(0) iz .is-entered) u novu (translate + scale ispod) i
     transition se okida normalno preko 1.05s.
     Transform vrijednosti dolaze iz JS-a (vidi triggerMorph() u main.js:
     izmjeri pravi header logo, izračunaj scale + translate, postavi custom
     properties). Pošto su tx/ty/scale izračunati TAČNO da poklope pravi
     header logo, na kraju animacije intro logo sjedi na identičnoj viewport
     poziciji kao pravi logo. */
  transform:
    translate(var(--morph-tx, 0px), var(--morph-ty, 0px))
    scale(var(--morph-scale, 0.18));
  transform-origin: center center;
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1);
  /* Prevent layout / pixel snapping flicker tokom GPU transform */
  will-change: transform;
}
.site-loader.phase-morph .intro-stage {
  /* Stage zadržava svoj zoom-fazni translate (-14vh) — to je dio
     mjerenja koje JS radi (getBoundingClientRect bilježi konačnu
     viewport poziciju i bez ovoga). Bitno je da NE dodajemo dodatni
     transform na stage tokom morfa — sav pokret ide isključivo kroz
     transform na samom logu, da FLIP math ostane precizan. */
  transition: opacity 0.5s ease;
  opacity: 1;
}
.site-loader.phase-morph .intro-percent,
.site-loader.phase-morph .intro-side-label {
  /* Procenat i bočne labele su već fade-out u phase-done-load, ali
     osiguravamo da ne "trzaju" nazad tokom morfa. */
  opacity: 0 !important;
}
.site-loader.phase-morph .intro-peek-card {
  /* Peek kartica klizi do svoje konačne pozicije (gdje sjedi prava
     prva stack kartica) — top: nav-h + grid-gap, full width minus
     side margins.
     VAŽNO — koristi ISTU cubic-bezier krivu kao .site-loader-logo
     (cubic-bezier(0.76, 0, 0.24, 1), ease-in-out) i isto trajanje (1.05s).
     Ranije je kartica koristila ease-out-quint (cubic-bezier(0.22, 1, 0.36, 1))
     koja kreće VRLO brzo, dok logo kreće sporo (ease-in-out) — pa bi se
     kartica u prvih ~300ms vinula uvis i sjekla preko loga koji je još
     velik u sredini. Sa istom krivom, oba elementa imaju identičan
     progres u svakom trenutku, pa kartica i logo putuju u lockstep-u
     i ne dolazi do preklapanja.

     Peek OSTAJE OPAQUE (opacity 1) tokom cijelog leta. Ranije je
     fade-out-ovala (opacity 0 sa delay 0.6s) u drugoj polovini leta —
     što je dodatno činilo prave kartice iza nje vidljivim "kroz"
     poluprovidnu peek kao reload osjećaj. Sada peek ostaje puna sve
     do atomic swap-a u finishMorph(), gdje cijeli loader instantno
     nestaje. */
  /* bilo: bottom calc(100vh - nav-h - grid-gap - 75vh); ista konačna
     pozicija izražena kao delta od baznog bottom:-52vh →
     pomak naviše = 77vh - nav-h - grid-gap. */
  transform: translateY(calc(-77vh + var(--nav-h) + var(--grid-gap)));
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1);
  /* opacity ostaje 1 — atomic swap u finishMorph() instantno gasi
     cijeli loader, pa peek se uklanja zajedno sa njim. */
}
.site-loader.phase-morph .intro-scroll-hint {
  /* KRITIČNO: keyframe scrollHintPulse (postavljen na .intro-scroll-hint
     u osnovnom pravilu) inače nastavlja da pulse-uje opacity između
     0.55 i 0.85 svakih 2.2s. Bez `animation: none` ovdje, taj pulse
     overriduje naš `opacity: 0` i SCROLL hint ostaje vidljiv na sredini
     ekrana nakon što logo počne morf u gornji-lijevi cošak. Bug se
     manifestovao kao "SCROLL tekst zaglavljen na sredini ekrana". */
  opacity: 0 !important;
  animation: none !important;
  transition: opacity 0.3s ease;
}

/* Kada je morph završen — loader se gasi (već je BG transparentan,
   peek je nevidljiv, ostao je samo intro logo koji sleti na pravu
   poziciju). is-hidden je kratak crossfade (0.35s) koji se poklapa sa
   .site-logo opacity 0→1 tranzicijom — tako pravi header logo ELEGANTNO
   "preuzima" mjesto od intro loga, bez vidljivog snap-a. */
.site-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hard skip — za posjete gdje je loader već odsviran u sesiji.
   Markup ostaje u DOM-u (radi konzistentnih ID-jeva), samo se ne vidi
   i ne blokira paint. */
html.skip-loader .site-loader { display: none !important; }

/* Dark mode — bež postaje skoro-crna, logo se invertuje. */
[data-theme="dark"] .site-loader {
  background: #0F0F0F;
}
/* NAPOMENA: ranije je ovdje bio
       [data-theme="dark"] .site-loader.phase-morph {
         background-color: rgba(15, 15, 15, 0);
       }
   da bi dark loader fade-ovao u transparent tokom morfa. Sada koristimo
   "curtain reveal" pristup (BG ostaje opaque tokom cijelog leta, atomic
   swap u finishMorph() instantno gasi cijeli loader), pa ovo pravilo
   više nije potrebno — loader ostaje #0F0F0F dok ne nestane.  */
[data-theme="dark"] .site-loader-logo { filter: invert(1); }
[data-theme="dark"] .site-loader .intro-side-label,
[data-theme="dark"] .site-loader .intro-percent,
[data-theme="dark"] .site-loader .intro-scroll-hint { color: var(--mint-ink); }

/* Quiet opacity-only crossfade. No translate — sticky stacked cards
   would visibly jump. Fade-out is intentionally a touch quicker than
   fade-in so navigation feels responsive without being abrupt. */
.page-content {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.page-content.loaded {
  opacity: 1;
}
.page-content.leaving {
  opacity: 0;
  transition: opacity 0.22s ease-out;
}

/* ============== HEADER / NAV ==============
   Header je VIZUELNI "mint band" sajta — kada je sajt učitan i kada
   korisnik skroluje, gornji bar pokazuje mint nijansu (akcent boja
   brenda), dok ostatak sajta diše u toploj bež boji. Na samom vrhu
   stranice (scrollY = 0) header je transparentan; nakon skrolanja
   "ulazi" u svoj mint stanje. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 100;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: background 0.5s ease, box-shadow 0.5s ease;
  /* Animacija ulaska header-a iz nule: počinje SKRIVEN na home strani
     dok intro radi (kontroliše JS preko html.intro-active). Na ostalim
     stranicama (skip-loader) header ulazi normalnim fade-in-om. */
  animation: navFadeIn 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  opacity: 0;
}

/* Tokom intro animacije, header je potpuno skriven (intro overlay
   pokriva sve, i nemamo "duple" loge na ekranu). JS uklanja klasu kada
   morph završi.
   
   NAPOMENA: Ranije je ovdje bilo `html.intro-active { overflow: hidden }` i
   `body { overflow: hidden }` zaključavanje skrola. To je uklonjeno jer
   je uzrokovalo VIDLJIVI BUG na kraju animacije: postavljanje overflow:hidden
   sklanja vertikalni scrollbar (na Windows-u i sl.), što proširuje viewport
   za ~15px. Kad morph završi i oslobodi se overflow, scrollbar se vraća
   i viewport se suzi nazad. Posljedica:
   
     1. Intro logo (centriran u viewport-u preko flex-a) se "anchorovao" na
        ŠIRI viewport tokom morfa, pa kad se viewport suzi na kraju, FLIP
        target je promašen za pola scrollbar-širine (~7.5px ulijevo).
        Korisnik to vidi kao "logo sleti pored mjesta".
     
     2. Stacked kartice imaju 40px padding sa obje strane. Kad se viewport
        suzi za 15px, kartice se vidno suze sa desne strane na samom kraju.
        Korisnik to doživljava kao "kartice se reloaduju".
   
   Sada se skrol zaključava ISKLJUČIVO preko JS event listenera (wheel,
   touchmove, keydown — vidi main.js), tako da scrollbar ostaje VIDLJIV
   tokom cijele intro animacije, viewport se NE MIJENJA, i sve pozicije
   ostaju konzistentne od početka do kraja. */
html.intro-active .site-header {
  opacity: 0 !important;
  animation: none;
  pointer-events: none;
}

/* Tokom MORPH faze (intro logo putuje ka header poziciji), oslobađamo
   header da se njegovi elementi (meni, mail, lang, theme) iscrtaju i
   fade-in počne — ali sam HEADER LOGO ostaje nevidljiv. Razlog: JS
   mora MJERITI gdje pravi header logo treba da bude (preko
   getBoundingClientRect-a) da bi FLIP transform bio precizan; pa zato
   header mora biti layout-vidljiv. Ali da ne bismo imali dva loga na
   ekranu tokom morfa (intro logo koji leti + pravi logo koji se
   sa fade-in pojavljuje), pravi logo držimo opacity 0 dok morph traje.
   Kad finishMorph() ukloni .intro-morphing, pravi logo CROSSFADE-uje IN
   (preko .site-logo opacity transition-a, vidi dole) — istovremeno sa
   intro logo CROSSFADE-uje OUT (preko loader.is-hidden opacity fade-a).
   Pošto su na identičnoj poziciji, swap je nevidljiv. */
html.intro-morphing .site-header {
  /* Meni elegantno fade-in tokom morfa. Mali delay (0.2s) da prvi
     trenutak morfa (logo počinje da leti) bude focus, pa onda meni
     "stigne" sinhrono sa krajem letenja — feel je jedne kompozicije,
     a ne dvije nezavisne animacije. */
  animation: navFadeIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
html.intro-morphing .site-header .site-logo {
  /* Pravi logo OSTAJE nevidljiv tokom morfa — vidi se samo intro logo
     koji leti. Crossfade IN se okida kad finishMorph() ukloni
     .intro-morphing klasu (vidi .site-logo opacity transition dole). */
  opacity: 0;
}

.site-header.scrolled {
  /* Mint band sa blago "matiranim" staklenim efektom. Boja je glavna
     brand mint nijansa — daje sajtu prepoznatljiv "krov". */
  background: rgba(181, 196, 176, 0.92);    /* --mint-sage tonirano */
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.05);
}

@keyframes navFadeIn {
  to { opacity: 1; }
}

.site-logo {
  display: flex;
  align-items: center;
  height: 100%;
  /* Opacity transition se koristi za CROSSFADE swap na kraju intro
     morfa: kad finishMorph() ukloni .intro-morphing klasu, opacity ide
     0 → 1 preko 0.35s. Istovremeno se loader (sa intro logom na istoj
     poziciji) gasi preko .is-hidden opacity 1 → 0 / 0.35s. Rezultat je
     nevidljiv swap — i čak i ako FLIP math ima sub-piksel grešku,
     crossfade je MASKIRA. Bez ovoga, real logo bi "snap-ovao" u
     vidljivost što čini eventualnu poziciju razliku očiglednom. */
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-logo img {
  height: 44px;
  width: auto;
  transition: transform 0.3s ease;
}
.site-logo:hover img { transform: scale(1.04); }

/* Nav menu */
.site-nav { display: flex; align-items: center; gap: 8px; }

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 36px;
}

/* Mobilne-only stavke (CTA pill + tagline) skrivene su na desktopu —
   na desktopu se "Kontakt" pokazuje kao obican link u glavnoj listi. */
.nav-menu .nav-mobile-cta,
.nav-menu .nav-mobile-tagline { display: none; }

.nav-menu a {
  /* MENI ostaje u Inter-u — eksplicitan zahtjev klijenta da meni i
     dijelovi na dnu stranice ostanu kao prije zbog čitljivosti
     (Raleway sa težinom 500 + uppercase letterspacing bi bio na
     graničnoj veličini čitljiv u 13px desktop meniju). */
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mint-ink);
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.4em;
  vertical-align: middle;
}

/* parapet's "text reveal" menu hover effect */
.nav-menu a .menu-text {
  display: inline-block;
  position: relative;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-menu a .menu-text::before {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}
.nav-menu a:hover .menu-text { transform: translateY(-100%); }
/* AKTIVNA stavka — isticanje trenutne stranice u meniju.
   Klasu "active" postavlja partials.js na osnovu URL-a.
   1) menu-text postaje Inter 700 (bold) umjesto default 500 — jasna
      težinska razlika pri prvom pogledu (radi na SVIM viewportima)
   2) Mala tačka u sage akcent boji ispod stavke — diskretan "page
      indicator" SAMO NA DESKTOP NAVU (min-width: 1025px niže).
      Na mobilnom fullscreen meniju stavke su centrirano stack-ovane
      vertikalno, pa bi tačka stajala između dvije stavke što izgleda
      kao vizuelni bag. Tu se oslanjamo isključivo na bold weight. */
.nav-menu a.active .menu-text,
.nav-menu a.active .menu-text::before { font-weight: 700; }

@media (min-width: 1025px) {
  .nav-menu li:has(> a.active) {
    position: relative;
  }
  .nav-menu li:has(> a.active)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 4px;
    height: 4px;
    background: var(--mint-sage);
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
  }
}

.nav-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 6px;
  border-radius: 50%;
  color: var(--mint-ink);
  transition: background 0.3s ease, opacity 0.3s ease;
}
.nav-mail:hover {
  background: rgba(0, 0, 0, 0.06);
}
.nav-mail svg { display: block; width: 18px; height: 18px; }

/* Language toggle (ME / EN) */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  margin-left: 8px;
  border-radius: 30px;
  border: 1px solid var(--mint-line);
  color: var(--mint-ink);
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}
.lang-toggle:hover {
  background: var(--mint-ink);
  color: var(--mint-white);
  border-color: var(--mint-ink);
}
.lang-toggle .lang-current { font-weight: 700; }
.lang-toggle .lang-other  { opacity: 0.55; }
.lang-toggle .lang-sep    { opacity: 0.35; font-weight: 400; }
.lang-toggle:hover .lang-other { opacity: 0.85; }

/* Theme (dark mode) toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 6px;
  border-radius: 50%;
  color: var(--mint-ink);
  transition: background 0.3s ease, transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.theme-toggle:hover {
  background: rgba(0, 0, 0, 0.06);
  transform: rotate(-25deg);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--mint-ink);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.3s ease;
}
.menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============== SPLIT HEADING ANIMATION ============== */
/* parapet's "line-reveal-by-space" / "letter-reveal-bottom" */
.split-heading {
  display: inline-block;
  overflow: visible;
}
.split-heading .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.05em;
  margin: 0 -0.05em;
  /* Silk Serif ima EKSTRA duboke descendere (posebno na "j" i "y") koji
     su sa line-height 1.45 i dalje "virili" ispod overflow:hidden box-a
     — vidljivo na naslovu "Projekti" gdje je bottom slova "j" odsječen.
     1.7 daje 0.34em prostora ispod baseline-a, dovoljno za najduže
     descendere u ovom rezu. Promjena ne mijenja vizuelni ritam jer je
     riječ inline-block sa vertical-align:bottom — proširenje ide UVIS,
     ne udesno. Translate u .inner ažuriran proporcionalno (1.75em) da
     pri otvaranju animacije inner i dalje bude potpuno sakriven. */
  line-height: 1.7;
}
.split-heading .word .inner {
  display: inline-block;
  /* translateY usklađen sa povećanim line-height (1.7em) — inner mora
     biti potpuno ispod vidljive zone prije animacije. */
  transform: translateY(1.75em);
  transition: transform 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}
.split-heading.animated .word .inner {
  transform: translateY(0);
}
/* stagger words */
.split-heading.animated .word:nth-child(1) .inner { transition-delay: 0s; }
.split-heading.animated .word:nth-child(2) .inner { transition-delay: 0.06s; }
.split-heading.animated .word:nth-child(3) .inner { transition-delay: 0.12s; }
.split-heading.animated .word:nth-child(4) .inner { transition-delay: 0.18s; }
.split-heading.animated .word:nth-child(5) .inner { transition-delay: 0.24s; }
.split-heading.animated .word:nth-child(6) .inner { transition-delay: 0.30s; }
.split-heading.animated .word:nth-child(7) .inner { transition-delay: 0.36s; }
.split-heading.animated .word:nth-child(8) .inner { transition-delay: 0.42s; }
.split-heading.animated .word:nth-child(9) .inner { transition-delay: 0.48s; }
.split-heading.animated .word:nth-child(10) .inner { transition-delay: 0.54s; }

/* Fade-up generic animation */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
              transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.fade-up.in-view { opacity: 1; transform: translateY(0); }

/* ============== STACKED PROJECTS GRID ============== */
/* parapet's signature sticky-stack scrolling effect */
.stacked-grid {
  padding: var(--grid-gap);
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--grid-gap);
  position: relative;
}

.stacked-card {
  position: sticky;
  /* Cards stick BELOW the fixed header with a floating gap that matches
     the side margins — so they never visually touch the top bar. */
  top: calc(var(--nav-h) + var(--grid-gap));
  height: 75vh;
  min-height: 480px;
  border-radius: var(--radius);
  /* NOTE: NO background here — when .stack-inner scales down (0.8) during
     the stacking animation, the page's mint background shows through.
     If we put a dark colour here it shows as a black ring around the
     previous card, which is the parapet-style overlay effect breaking. */
  background: transparent;
  transform-origin: top center;
  /* NOTE: will-change lives on .stack-inner below, NOT here — the JS-driven
     scale + blur applies to the inner wrapper, not the sticky outer card.
     Putting the hint on the outer (as it used to be) made the browser
     promote the wrong layer, and the inner kept getting un-promoted /
     re-promoted as scrolling started and stopped, which read as jank on
     the very first stacking transition. */
  transition: opacity 0.4s ease;
}

/* Homepage variant — no inner-hero above, so the grid itself must push
   the first card down past the fixed header with the same floating gap
   as the side margins. */
.stacked-grid.stacked-grid--top {
  padding-top: calc(var(--nav-h) + var(--grid-gap));
}

/* The blur-and-scale effect as cards stack below newer ones.
   Sjenka je dodata na ovaj UNUTRAŠNJI omotač (a ne na sam .stacked-card)
   jer se ovaj omotač skalira i blurra kroz scroll choreografiju — sjenka
   se prirodno smanjuje sa karticom, što čita kao "lift" iznad sajta.
   Dvostruka shadow varijabla (vidi --shadow-card u :root) daje topao
   3D feeling — kartice djeluju kao da fizički sjede iznad bež površine.

   POLAROID FRAME (klijentska ispravka):
   Po istom tretmanu kao .about-bio-frame na O NAMA stranici — kartica
   sada ima cream "passe-partout" okvir oko slike (background +
   suptilan border + zaobljeni unutrašnji uglovi na samoj slici).
   Frame je elegantno tanak (10px) — vizuelno prisutan ali ne agresivan.
   Slika, overlay i view-indicator su pomjereni ka unutra preko inset:10px
   da se frame vidi sa svih strana. */
.stacked-card .stack-inner {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mint-cream-soft);
  /* KLIJENTSKA ISPRAVKA v3: tamniji border (0.16 umjesto 0.10) i jača
     sjenka — frame više ne djeluje "transparentno" niti se gubi u
     bež pozadini sajta. Cream "passe-partout" je sada jasno definisan
     i ostaje VIDLJIV tokom hover-a (slika se zumira unutar svog
     wrappera — vidi .stack-image-wrap ispod). */
  border: 1px solid rgba(26, 26, 26, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 24px 60px -22px rgba(26, 26, 26, 0.34),
    0 10px 24px -14px rgba(26, 26, 26, 0.20);
  /* GPU promotion: will-change tells the compositor to keep this on its
     own layer so transform+filter changes don't trigger paint on the
     surrounding page. translateZ(0) is the belt-and-braces — it forces
     layer creation immediately on first paint, instead of waiting for
     the first transition to kick in (which is what made the first card
     "snap" into its blur the first time you scrolled past). */
  will-change: transform, filter;
  transform: translateZ(0);
  /* The 50ms linear interpolation exists to mask the stair-step you get
     when a legacy mouse wheel fires 100px scroll jumps — it spreads each
     JS write across ~3 frames so the eye can't see the discrete steps.
     In smooth-input mode (see InputStyle in main.js: trackpads, touch,
     and high-resolution mice deliver 1–5px deltas at 100Hz+ already)
     the input *itself* is frame-aligned, and this transition only adds
     ~25ms of average visual lag for no benefit. The HTML class toggles
     it off there so trackpad scrolling stays direct. */
  transition:
    transform 0.05s linear,
    filter 0.05s linear,
    box-shadow 0.6s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1));
}
html.smooth-input .stacked-card .stack-inner {
  /* FIX: ranije je stajalo `transition: none` sto je (zbog vece
     specificnosti od :hover pravila) ubijalo i hover animaciju sjenke
     na trackpad/hi-res misu - sjenka je 'pucala' bez tranzicije.
     Gasimo samo transform/filter lerp; box-shadow ostaje gladak. */
  transition: box-shadow 0.6s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1));
}
/* KLIJENTSKA ISPRAVKA v3: hover NE mijenja sam frame — ostaje statičan
   (border, background, dimenzije netaknute). Mijenjamo SAMO box-shadow
   da kartica suptilno "lift-uje" pri hover-u. Slika se zumira unutar
   .stack-image-wrap (vidi ispod) — frame ostaje istog izgleda. */
.stacked-card:hover .stack-inner {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 32px 78px -22px rgba(26, 26, 26, 0.40),
    0 14px 30px -14px rgba(26, 26, 26, 0.24);
  /* FIX: bez transition override-a ovdje - override je mijenjao listu
     tranzicija pri svakom hover in/out pa je sjenka pri izlasku kursora
     'pucala' (box-shadow tranzicija zivi na baznom pravilu iznad). */
}

/* WRAPPER oko slike — definiše "prozor" kroz koji se vidi render.
   Inset 14px sa svih strana znači da je render manji od kartice za 14px
   (cream "passe-partout" frame oko slike). overflow:hidden klipuje sliku
   pri scale(1.04) — slika se zumira UNUTAR ovog prozora a ne preko frame-a,
   pa cream ivica OSTAJE VIDLJIVA tokom hover-a. Ovo je core razlog zašto
   je frame ranije "nestajao": slika je skalirana van svog inseta i prelazila
   preko cream rama; sada wrapper drži granicu. */
.stacked-card .stack-image-wrap {
  position: absolute;
  inset: 14px;
  border-radius: calc(var(--radius) - 16px);
  overflow: hidden;
  /* iOS Safari clipping fix — inače kombinacija border-radius +
     overflow:hidden + scaled child klipuje neujednačeno na donjim uglovima */
  isolation: isolate;
  /* clip-path kao back-up za Safari */
  clip-path: inset(0 round calc(var(--radius) - 16px));
}

.stacked-card .stack-image {
  /* KLIJENTSKA ISPRAVKA v3: slika je sada unutar .stack-image-wrap (koji
     ima inset:14px i overflow:hidden). Slika popunjava cijeli wrapper
     (top/left/width/height = 100%) i pri hover-u se zumira (scale 1.04)
     UNUTAR wrappera — wrapper-ov overflow:hidden klipuje preliv, pa
     cream frame oko wrappera ostaje vidljiv. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* FIX: uskladjeno sa micro-polish slojem (1.2s ease-apple, scale 1.05)
     da ne postoje dva konkurentna pravila za isti hover efekat. */
  transition: transform 1.2s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1));
}
.stacked-card:hover .stack-image { transform: scale(1.05); }

.stacked-card .stack-overlay {
  /* Overlay je sada takođe unutar .stack-image-wrap-a — pokriva sliku
     u potpunosti (inset:0), pa gradient (transparent → 55% black) leži
     na renderu unutar cream frame-a. */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

.stacked-card .stack-content {
  position: absolute;
  left: auto;
  right: 14px;
  bottom: 14px;
  padding: 50px 60px;
  text-align: right;
  color: #fff;
  z-index: 2;
  max-width: calc(100% - 28px);
}

.stacked-card .stack-category {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 14px;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}
.stacked-card .stack-category::after {
  content: '';
  position: absolute;
  /* Sa text-align:right na roditelju, kategorija je inline-block i sjedi
     desno; podvlaka treba da prati cijelu njenu širinu. */
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.stacked-card .stack-title {
  font-family: var(--font-display);
  /* Krupniji nego prije po klijentskoj ispravci — naziv projekta je
     najjači element na kartici (raniji clamp: 40-110px, novi: 56-150px). */
  font-size: clamp(56px, 7.5vw, 150px);
  line-height: 0.95;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.02em;
}

.stacked-card .stack-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.stacked-card .stack-view-indicator {
  position: absolute;
  /* Inset 10px iznutra zbog frame-a koji sada zauzima 10px sa svih strana.
     Pill ostaje "na slici" a ne na ramu. */
  top: 30px;
  right: 30px;
  /* Hard-coded colours — pill always sits on the card image, so it
     should stay light bg + dark ink in both themes for legibility. */
  background: #fff;
  color: #1A1A1A;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 2;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.stacked-card:hover .stack-view-indicator {
  opacity: 1;
  transform: translateY(0);
}

/* ============== HERO STRIP (top of homepage) ============== */
.hero-strip {
  padding: calc(var(--nav-h) + 20px) var(--container-padding) 56px;
  position: relative;
  will-change: opacity, transform;
}
.hero-strip h1 {
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.015em;
  max-width: 1100px;
}
/* Per-word line-height inside the hero heading — kept generous enough
   to give háčeks/diacritics (č, š, ž) room above the overflow-hidden box. */
.hero-strip h1.split-heading .word {
  line-height: 1.18;
}
.hero-strip .hero-sub {
  margin-top: 16px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--mint-ink);
  opacity: 0.78;
}

.hero-filter-row {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mint-line);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.hero-filter-row .label { opacity: 0.55; }
.hero-filter-row .count {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

/* ============== INNER PAGE HERO ==============
   Koristi se na Projekti / Usluge / O nama / Shop — naslov + uvodni
   pasus odmah ispod fiksiranog header bara. */
.inner-hero {
  padding: calc(var(--nav-h) + 24px) var(--container-padding) 40px;
}
.inner-hero h1 {
  font-size: clamp(48px, 7vw, 104px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.025em;
  max-width: 1200px;
}
.inner-hero .lead {
  margin-top: 20px;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  font-weight: 300;
  max-width: 720px;
  color: var(--mint-ink);
  opacity: 0.82;
}

/* ============== INQUIRY PAGE HERO (kombinovani layout) ==============
   Po skici klijenta, "Kontakt" naslov + uvodni paragraf + naglašeni info
   blok sa lijeve strane, FORMA odmah pored sa desne (počinje na istoj
   visini kao naslov). Ranije je forma bila ispod čitavog hero bloka i
   zato djelovala "spuštena". Ovaj layout je jedinstven grid-container
   koji oba elementa drži u istoj liniji. */
.inquiry-page-hero {
  /* Top padding zadržava prostor ispod fiksiranog header bara */
  padding: calc(var(--nav-h) + 20px) var(--container-padding) 80px;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 70px;
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}
.inquiry-page-hero .inquiry-heading-col h1 {
  font-size: clamp(48px, 7vw, 104px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 0 0 28px 0;
}

/* Forma starta na istoj liniji kao naslov "Kontakt" — gornje ivice
   se poklapaju (po skici klijenta). Margin-top 0 da panel ne "klizne"
   ispod baseline-a h1. Donja ivica forme i mape se već poklapaju jer
   .inquiry-heading-col ima align-self:stretch + flex column, a mapa
   .inquiry-map-wrap ima flex:1 1 auto — pa mapa popunjava preostali
   prostor do dna grid reda (koji ima visinu forme). */
.inquiry-page-hero .inquiry-form {
  margin-top: 0;
}

/* ============== SECTIONS ============== */
.section {
  padding: 80px var(--container-padding);
}
.section.tight { padding: 60px var(--container-padding); }
/* Body je sada bež (--mint-cream), pa "cream" sekcija ne može više biti
   ista boja kao tijelo. Koristimo --mint-cream-deep (malo dublji bež) da
   se ovi CTA paneli vizuelno odvoje kao tih plato u sajtu. Razlika je
   suptilna ali daje vertikalni ritam stranicama bez razbijanja jedinstva. */
.section.cream { background: var(--mint-cream-deep); }
.section.ink { background: var(--mint-ink); color: var(--mint-white); }

.container {
  max-width: 1400px;
  margin: 0 auto;
}
.container.narrow { max-width: 920px; }

/* ============== SERVICES ==============
   Service kartice su sada FOTO-KARTICE: crno-bijela fotografija ispunjava
   cijeli okvir, a tekst sjedi u dnu preko tamnog gradijenta. Vizuelno
   odgovaraju tretmanu glavnih stacked kartica (sjenka, radius, hover
   lift) — sajt djeluje kao jedna familija.

   Layout: 3×2 grid na desktopu, 2×3 na tabletu, 1×6 na mobilnom.
   Visina je veća nego ranije (ispunjavaju veći dio površine, kako je
   klijent zatražio). */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 0;
}

.service-card {
  position: relative;
  /* Veća visina — kartice "diktiraju" prostor sekcije. */
  aspect-ratio: 4 / 5;
  min-height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mint-ink);   /* fallback dok se slika učitava */
  box-shadow: var(--shadow-card);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  border: 0;       /* uklanja stari border iz prethodne white verzije */
  padding: 0;
  isolation: isolate;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

/* === Fotografija unutar kartice ===
   filter: grayscale(1) daje crno-bijeli look bez potrebe za posebnim
   B&W kopijama foto-fajlova. Klijent može kasnije izbaciti filter ako
   želi pravu B&W foto u JPG-u. */
.service-card .service-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  transition: transform 1.4s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1));
}
.service-card:hover .service-img { transform: scale(1.06); }

/* === Gradient u dnu — pojačava čitljivost teksta preko slike ===
   Počinje na 35% visine kartice (otprilike gornja granica donje
   trećine), tamni do gotovo crne na dnu. */
.service-card .service-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0)   35%,
    rgba(0, 0, 0, 0.35) 60%,
    rgba(0, 0, 0, 0.85) 100%
  );
  pointer-events: none;
}

/* === Sadržaj kartice (tekst) — sjedi u DNU iznad gradijenta === */
.service-card .service-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 30px;
  color: #fff;             /* uvijek svijetlo — i u light i u dark modu */
  z-index: 2;
}
.service-card .service-num {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin-bottom: 10px;
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 12px 0;
  color: #fff;
  letter-spacing: -0.005em;
}
.service-card p {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  /* maksimalna širina za readability na širokom desktopu */
  max-width: 38ch;
}

/* ============== ABOUT ============== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  /* align-items: stretch — desna kolona se rasteže do visine slike,
     pa "margin-top: auto" na .about-stats gura statistike na dno
     desne kolone, tačno u liniji sa dnom slike (lijevo). */
  align-items: stretch;
}
.about-right {
  display: flex;
  flex-direction: column;
}
.about-grid .about-img {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 5;
}
.about-grid .about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.about-grid:hover .about-img img { transform: scale(1.04); }

.about-body p {
  font-size: 18px;
  line-height: 1.75;
  margin: 0 0 24px 0;
  color: var(--mint-ink);
}
.about-body p.lead {
  font-size: 24px;
  line-height: 1.45;
  font-weight: 300;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  /* margin-top: auto — gura stats na dno desne kolone (koja je
     rastegnuta do visine slike), pa se dno teksta poklapa sa dnom slike.
     padding-top + border-top dodaju suptilan razdjelnik od body teksta. */
  margin-top: auto;
  padding-top: 36px;
  border-top: 1px solid var(--mint-line);
}
.about-stats .stat-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  font-weight: 400;
}
.about-stats .stat-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: 0.6;
}

/* ============== VALUE CARDS (about: Materijal/Svjetlost/Vrijeme) ==============
   3 foto-kartice istog tretmana kao service kartice — crno-bijela
   fotografija + tamni gradient pri dnu + naslov i kratak opis u dnu.
   Vizuelno pripada istoj familiji kao stacked + service kartice — sajt
   se čita kao jedna cjelina. */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 50px;
}

.value-card {
  position: relative;
  aspect-ratio: 4 / 5;
  min-height: 440px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mint-ink);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  isolation: isolate;
  text-align: left;             /* override center od roditelja */
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.value-card .value-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  transition: transform 1.4s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1));
}
.value-card:hover .value-img { transform: scale(1.06); }
.value-card .value-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0)   35%,
    rgba(0, 0, 0, 0.35) 60%,
    rgba(0, 0, 0, 0.85) 100%
  );
  pointer-events: none;
}
.value-card .value-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 30px;
  color: #fff;
  z-index: 2;
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 12px 0;
  color: #fff;
}
.value-card p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  max-width: 38ch;
}

/* ============== SHOP ============== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
  margin-top: 60px;
}

.shop-card {
  background: var(--mint-white);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.shop-card:hover { transform: translateY(-8px); }

.shop-card .shop-img {
  aspect-ratio: 4 / 5;
  background: var(--mint-cream);
  overflow: hidden;
}
.shop-card .shop-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.shop-card:hover .shop-img img { transform: scale(1.06); }

.shop-card .shop-info { padding: 26px 28px; }
.shop-card .shop-name {
  font-family: var(--font-display);
  font-size: 24px;
  margin-bottom: 6px;
}
.shop-card .shop-price {
  font-size: 14px;
  opacity: 0.7;
  letter-spacing: 0.05em;
}
.shop-card .shop-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--mint-cream);
  padding: 5px 12px;
  border-radius: 20px;
  margin-top: 12px;
}

.shop-empty-note {
  background: var(--mint-white);
  border-radius: var(--radius);
  padding: 50px;
  text-align: center;
  margin-top: 0;
  border: 1px solid var(--mint-line);
}
.shop-empty-note p { font-size: 17px; color: var(--mint-muted); margin: 0; }

/* Shop "OTVARAMO USKORO" minimal scene — po zahtjevu klijenta, shop
   strana sadrži SAMO ovu poruku, centriranu na sredini ekrana. Bez
   kartica, bez forme, bez CTA dugmadi. Ostavlja prostoru da "diše"
   i jasno komunicira da je shop u pripremi. */
.shop-coming-section {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--container-padding) 120px;
}
.shop-coming-wrap {
  text-align: center;
  max-width: 900px;
}
.shop-coming-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 11vw, 160px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--mint-ink);
  margin: 0;
}

/* Shop page — manji bottom padding na inner-hero kad nema lead pasusa,
   plus tighter section padding ispod, da "Otvaramo uskoro" sjedi vise.
   (Legacy — sada se ne koristi jer shop strana koristi .shop-coming-section.) */
.shop-page .inner-hero { padding-bottom: 12px; }
.shop-page .section { padding-top: 28px; }

/* ============== INQUIRY ==============
   Layout je preuređen po skici klijenta:
   - Forma je podignuta NAVIŠE (sjedi pored "Kontakt" naslova, ne ispod
     uvodnog paragrafa). To postižemo grid-template-areas + align-self
     na hero sekciji (vidi i .inquiry-hero ispod).
   - Informacije (email / instagram / lokacija) imaju MNOGO veću tipografiju
     da odmah privlače oko.
   - Form panel je tamniji bež (--mint-cream-deep) sa elegantnom sjenkom
     — ostaje u istoj familiji boja kao ostatak sajta, dobija "lift" kao
     i stacked / service kartice. */
.inquiry-wrap {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 70px;
  align-items: start;
}

/* Info kolona — uvodni paragraf */
.inquiry-info p.inquiry-intro {
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 36px 0;
  max-width: 38ch;
  color: var(--mint-ink);
  opacity: 0.85;
}

/* === Naglašen info blok ===
   Email, Instagram, Lokacija — VEĆI naslov + naglašena vrijednost ispod.
   Svaki red dobija razmak da disne. */
.inquiry-info .info-block {
  margin-top: 8px;
  padding-top: 30px;
  border-top: 1px solid var(--mint-line);
  display: grid;
  gap: 26px;
}
.inquiry-info .info-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: inherit;        /* override starog 15px da naslijedi naš novi blok */
  align-items: flex-start;
}
.inquiry-info .info-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  min-width: 0;              /* override starog */
  font-weight: 600;
}
.inquiry-info .info-value {
  /* STARO: Raleway. FINALNO: Cormorant Garamond — elegantna serif
     tipografija u istoj porodici kao display naslov "Kontakt", a opet
     čitljivija od Volterra-e na ovoj veličini. Email/IG/adresa
     izgledaju kao štampane na pozivnici, ne kao web UI. */
  font-family: var(--font-elegant);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--mint-ink);
  word-break: break-word;
}
.inquiry-info .info-value a {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.inquiry-info .info-value a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform 0.55s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1)),
              opacity 0.55s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1));
}
.inquiry-info .info-value a:hover::after {
  transform: scaleX(1);
  opacity: 0.85;
}

/* === Form panel ===
   Tamniji bež umjesto bijele kartice + diskretna sjenka da panel
   "izađe" iz pozadine kao i ostale kartice na sajtu. */
.inquiry-form {
  background: var(--mint-cream-deep);
  border-radius: var(--radius);
  padding: 44px 44px 40px;
  border: 0;
  box-shadow: var(--shadow-panel);
}

.form-field { margin-bottom: 22px; }
.form-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--mint-muted);
  font-weight: 600;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--mint-ink);
  /* Polja imaju svjetliju bež nego panel — vizuelno se "uvuku" u panel
     ali ostanu prepoznatljiva. */
  background: var(--mint-cream-soft);
  border: 1px solid transparent;
  border-radius: 12px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--mint-sage-deep);
  background: var(--mint-white);
}
.form-field textarea { resize: vertical; min-height: 130px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mint-ink);
  font-weight: 400;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 10px;
  /* Svjetlija bež da label "isplivu" iz panela koji je --mint-cream-deep */
  background: var(--mint-cream-soft);
  transition: background 0.2s ease;
}
.checkbox-grid label:hover { background: var(--mint-white); }
.checkbox-grid input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--mint-sage-deep);
  margin: 0;
}

.submit-btn {
  width: 100%;
  padding: 18px;
  background: var(--mint-ink);
  color: var(--mint-white);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 30px;
  transition: background 0.3s ease, transform 0.3s ease;
  margin-top: 8px;
}
.submit-btn:hover { background: var(--mint-sage-deep); transform: translateY(-2px); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.form-success {
  background: var(--mint-sage);
  color: var(--mint-ink);
  padding: 40px;
  border-radius: var(--radius);
  text-align: center;
  font-size: 18px;
}

/* ============================================================
   INQUIRY — KONTAKT MAPA (Google Maps embed)
   ============================================================
   Mapa sjedi ispod info bloka u lijevoj koloni Kontakt strane.
   Forma u desnoj koloni je visoka (sa svim poljima), pa se mapa
   rasteže do dna lijeve kolone preko `flex: 1` na wrap-u kombinovano
   sa `align-self: stretch` na samoj heading koloni grid-a.
   Rezultat: donja ivica mape je u istoj liniji kao "POŠALJI UPIT"
   dugme u desnoj koloni (skica klijenta).

   Toggle ("Mapa" / "Satelit") sjedi iznad same mape kao mali pill
   row u istom tretmanu kao filter chips na projects strani.
   ============================================================ */
.inquiry-heading-col {
  /* Heading kolona se rasteže do visine grid reda — daje mapi
     prostor da preuzme ostatak. */
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.inquiry-info {
  /* Info blok zauzima svoju prirodnu visinu — bez flex-grow. */
  flex: 0 0 auto;
}
.inquiry-map-wrap {
  /* Map wrap preuzima preostali prostor u koloni; ako forma desno
     nije dovoljno visoka (npr. mobile sa stack-layoutom), wrap zadržava
     minimalnu visinu da mapa ostane čitljiva. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  margin-top: 32px;
  position: relative;
}

/* Toggle row ("Mapa" / "Satelit") iznad mape. Pill stil kao filter chips
   ali kompaktniji — dva dugmeta jedan do drugog, lagano poravnata lijevo
   da prate vertikalu naslova "Kontakt". */
.inquiry-map-toggle {
  display: inline-flex;
  gap: 6px;
  background: var(--mint-cream-soft);
  border: 1px solid var(--mint-line);
  border-radius: 30px;
  padding: 4px;
  margin-bottom: 14px;
  align-self: flex-start;
}
.map-toggle-btn {
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mint-ink);
  background: transparent;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  opacity: 0.7;
}
.map-toggle-btn:hover { opacity: 1; }
.map-toggle-btn.is-active {
  background: var(--mint-ink);
  color: var(--mint-white);
  opacity: 1;
}
/* Dark-mode pill — keep brand-mint as the "active" highlight (matches
   submit-btn and filter-chip dark overrides used elsewhere). */
[data-theme="dark"] .map-toggle-btn.is-active {
  background: #B5C4B0;
  color: #1A1A1A;
}

/* Map kontejner (Google Maps iframe) — preuzima preostalu visinu wrap-a,
   zaobljeni uglovi i diskretan border u skladu sa ostatkom UI-a. */
.inquiry-map {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 280px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--mint-line);
  box-shadow: var(--shadow-panel);
  background: var(--mint-cream-soft); /* fallback dok se tile-ovi učitavaju */
  /* iOS Safari clipping fix — isto kao na .pstep-frame */
  isolation: isolate;
}

/* Google Maps iframe — popunjava cijeli kontejner. Border-radius klipuje
   preko overflow:hidden na .inquiry-map roditelju. */
.inquiry-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Dark tema: Google embed nema nativni dark stil, pa "Mapa" prikaz
   invertujemo filterom (standardni trik — invert + hue-rotate vrati
   boje na priblizno tacne tonove, samo tamne). "Satelit" ostaje
   netaknut jer je fotografija tonalno neutralna u obje teme. */
[data-theme="dark"] .inquiry-map.mode-map iframe {
  filter: invert(0.92) hue-rotate(180deg) contrast(0.9) saturate(0.7);
}

/* Responsive — na tabletu/mobilnom layout se već prebaci u jednu kolonu
   (vidi @media max-width 1100px na .inquiry-page-hero). Tamo mapa dolazi
   prirodno ispod info bloka i forme. Daj joj eksplicitnu visinu da se
   pravilno renderuje (flex: 1 nema gornju granicu u stacked layoutu). */
@media (max-width: 1100px) {
  .inquiry-map-wrap {
    min-height: 360px;
  }
  .inquiry-map {
    height: 360px;
    flex: 0 0 360px;
  }
}

/* ============== PROJECT DETAIL ============== */
/* Naslov i meta blok prate ŠIRINU hero rendera ispod
   (max-width: 1600px; padding: 40px sa svake strane) — sve je u jednoj
   vertikalnoj liniji: pocetak naslova = pocetak slike. */
.project-detail-hero {
  padding: calc(var(--nav-h) + 24px) var(--container-padding) 36px;
  max-width: 1680px;          /* 1600 (cover max) + 2 × 40 (cover side margins) */
  margin: 0 auto;
  box-sizing: border-box;
}
.project-detail-hero h1 {
  font-size: clamp(44px, 6vw, 92px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.project-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--mint-line);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-muted);
}
.project-meta span strong {
  display: block;
  font-size: 11px;
  opacity: 0.55;
  margin-bottom: 8px;
  font-weight: 600;
}

.project-cover {
  /* v24: hero render se prikazuje KOMPLETAN (bez kropovanja) — ram
     grli prirodne proporcije slike, koje god da su. Visina je
     ograničena na 82vh pa i vertikalni kadrovi staju u ekran. */
  width: fit-content;
  margin: 0 auto;
  max-width: min(1600px, calc(100% - 80px));
  border-radius: var(--radius);
  overflow: hidden;
  /* Polaroid ram — isti recept kao stacked kartice na naslovnoj i
     kadrovi horizontalne galerije. */
  padding: 14px;
  background: var(--mint-cream-soft);
  border: 1px solid rgba(26, 26, 26, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 24px 60px -22px rgba(26, 26, 26, 0.34),
    0 10px 24px -14px rgba(26, 26, 26, 0.20);
}
/* Unutrašnji "prozor" — klipuje parallax sliku (main.js je scale-uje
   1.08 i translira kroz skrol) da ne pređe preko cream rama. */
.project-cover-clip {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius) - 11px);
  overflow: hidden;
  clip-path: inset(0 round calc(var(--radius) - 11px));
  isolation: isolate;
}
.project-cover img {
  width: 100%; height: 100%; object-fit: cover;
}

.project-body {
  padding: 80px var(--container-padding);
}
.project-body .project-text {
  max-width: 720px;
  margin: 0 auto;
  font-size: 19px;
  line-height: 1.75;
}

.project-gallery {
  padding: 0 var(--container-padding) 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  /* FIX: 1600 + 2×40 padding (border-box) — ivice galerije se sada
     poklapaju sa ivicama hero cover-a i na sirokim ekranima. */
  max-width: 1680px;
  /* FIX: razmak cover → prva galerijska slika = 30px, identican gap-u
     izmedju redova galerije (opis je sakriven kad je prazan, pa je
     ovo jedini razmak u tom sloju). */
  margin: 30px auto 0;
}
.project-gallery .gallery-img {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.project-gallery .gallery-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.project-gallery .gallery-img:hover img { transform: scale(1.05); }

.project-gallery .gallery-img.full { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* ============== PROJECT — HORIZONTALNA SCROLL GALERIJA (v20) ==============
   Vertikalni skrol kroz .project-hscroll pokreće horizontalno klizanje
   trake (JS postavlja translate3d na .project-hscroll-track i visinu
   sekcije = 100vh + dužina puta). Sticky ekran drži traku u kadru.

   FIT PO VISINI: svaka slika ima height u vh i width:auto — vidi se
   CIJELA, bez croppovanja, bez obzira na aspect ratio i rezoluciju.
   Editorial ritam: itemi imaju blage naizmjenične vertikalne pomake.
   Reveal: .hitem-inner startuje providan i pomjeren udesno; .in klasa
   (JS, jedan po jedan kako ulaze u viewport) ga meko dovodi na mjesto. */
.project-hscroll {
  position: relative;
  /* visinu postavlja JS; fallback za no-JS je auto */
}
.project-hscroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.project-hscroll-track {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 110px);
  padding: 0 var(--container-padding);
  will-change: transform;
}
.hitem {
  flex: 0 0 auto;
  margin: 0;
}
.hitem-inner {
  /* Isti polaroid tretman kao stacked kartice na naslovnoj:
     cream passe-partout (padding), definisan border i topla sjenka.
     Radi automatski za svaku buducu sliku bilo kog formata. */
  padding: 14px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mint-cream-soft);
  border: 1px solid rgba(26, 26, 26, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 30px 70px -30px rgba(26, 26, 26, 0.30),
    0 12px 26px -16px rgba(26, 26, 26, 0.18);
  opacity: 0;
  transform: translate3d(70px, 0, 0);
  transition:
    opacity 1.0s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 1.0s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1));
}
.hitem.in .hitem-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.hitem-inner img {
  display: block;
  height: 72vh;
  width: auto;
  /* safety net za ekstremno široke kadrove — nikad preko viewporta */
  max-width: 90vw;
  object-fit: contain;
  /* unutrašnji radius + clip: slika prati ram (isti recept kao
     .about-bio-frame img / .stack-image-wrap) */
  border-radius: calc(var(--radius) - 11px);
  clip-path: inset(0 round calc(var(--radius) - 11px));
}

/* Fallback (touch / uski ekrani / reduced motion): običan vertikalni
   niz — svaka slika puna, cijela, centrirana. JS dodaje .no-pin. */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .project-hscroll { height: auto !important; }
  .project-hscroll-sticky {
    position: static;
    height: auto;
    overflow: visible;
  }
  .project-hscroll-track {
    transform: none !important;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    padding: 20px var(--container-padding) 60px;
  }
  .hitem-inner img {
    height: auto;
    width: 100%;
    max-width: 680px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hitem-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.project-nav {
  display: flex;
  justify-content: space-between;
  padding: 40px var(--container-padding) 80px;
  border-top: 1px solid var(--mint-line);
  max-width: 1600px;
  margin: 0 auto;
}
.project-nav a {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  transition: opacity 0.3s ease;
}
.project-nav a:hover { opacity: 0.6; }

/* ============== FOOTER ==============
   Footer je takođe bež, ali malo tamniji nijans (cream-deep) — daje
   nogu sajta vlastiti vizuelni weight a zadržava harmoniju sa tijelom. */
.site-footer {
  background: var(--mint-cream-deep);
  padding: 80px var(--container-padding) 30px;
  color: var(--mint-ink);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--mint-line);
}

.footer-brand .footer-logo {
  /* Footer logo — malo veći od originalnog "MINT design / studio."
     dvoreda (koji je zauzimao ~90-140px po visini). Volterra wordmark
     traži više vertikalnog prostora da disha. U dark modu se invertuje
     preko istog mehanizma kao header logo. */
  display: block;
  height: clamp(80px, 10vw, 140px);
  width: auto;
  margin-bottom: 24px;
  user-select: none;
}
[data-theme="dark"] .footer-brand .footer-logo {
  filter: invert(1);
}
.footer-brand p {
  font-family: var(--font-nav);
  font-size: 16px;
  line-height: 1.7;
  max-width: 420px;
  opacity: 0.8;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.footer-col h4 {
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 10px;
  font-size: 15px;
  font-family: var(--font-nav);
}
.footer-col a:hover { text-decoration: underline; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  font-size: 13px;
  font-family: var(--font-nav);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom .copyright { opacity: 0.65; }
.footer-bottom .made-by {
  opacity: 0.55;
  font-style: italic;
  letter-spacing: 0.05em;
}
.footer-bottom .made-by strong {
  font-style: normal;
  letter-spacing: 0;
  font-weight: 600;
}

/* ============== UTILITY ============== */
.text-eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 18px;
  display: inline-block;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1100px) {
  .about-grid, .inquiry-wrap { grid-template-columns: 1fr; gap: 50px; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .stacked-card .stack-content { padding: 36px 32px; }
  /* Tablet: 2 cards per row keeps the symmetric grid feel — 6 cards →
     three rows of two. Going below 3 columns is necessary because cards
     get too narrow for the heading + 3 lines of copy below ~340px. */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  /* 3 value kartice → 2 reda sa 2+1, prirodno kroz auto-fit ali ostavlja
     "rupu" — eksplicitno 1 kolona da svaka kartica diše */
  .values-grid { grid-template-columns: 1fr; gap: 24px; }
  /* Inquiry: forma ide ispod naslova + info bloka na tabletu */
  .inquiry-page-hero { grid-template-columns: 1fr; gap: 40px; padding-bottom: 50px; }
}

/* === iPad / tablet: switch the nav to the hamburger overlay ===
   Triggers at 1024px and below so it covers every iPad in portrait
   (iPad Mini 768, iPad 10th gen 810, iPad Air/Pro 11" 820/834, iPad
   Pro 12.9" 1024) without affecting 13"+ laptops (1280+). The 768px
   block below this one then layers phone-specific refinements
   (smaller font size, tighter padding, --nav-h: 70px) on top. */
@media (max-width: 1024px) {
  /* Show hamburger button (sits above the overlay so it stays tappable) */
  .menu-toggle {
    display: flex;
    position: relative;
    z-index: 101;
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .menu-toggle.open span {
    height: 2px;
    width: 24px;
    background: var(--mint-ink);
  }
  .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Full-viewport overlay nav — punto-cero style ali CENTRIRAN:
     linkovi centrirani i boldovani, bez separatora; KONTAKT kao
     crno pill dugme (centriran); kratak opis studija na dnu.
     Centriranje je zahtjev klijenta — daje meniju "stage" osjećaj
     na mobilnim ekranima. */
  .nav-menu {
    position: fixed;
    inset: 0;
    margin: 0;
    list-style: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 0;
    padding: calc(var(--nav-h) + 36px) 32px 40px;

    background: var(--mint-cream);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    isolation: isolate;

    z-index: 95;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
      opacity 0.45s cubic-bezier(0.65, 0, 0.35, 1),
      transform 0.55s cubic-bezier(0.65, 0, 0.35, 1),
      visibility 0s linear 0.5s;
  }
  .nav-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
      opacity 0.45s cubic-bezier(0.65, 0, 0.35, 1),
      transform 0.55s cubic-bezier(0.65, 0, 0.35, 1),
      visibility 0s linear 0s,
      background-color 0.5s ease;
  }
  /* CLOSING STATE — pojednostavljena, brža sekvenca (0.50s ukupno).
     Stari pristup je imao 1.05s stagger gdje se parent fade-uje na samom
     kraju — taj komplikovan timing je u praksi imao bug na nekim mobilnim
     uređajima gdje je parent pozadina nestajala PRIJE stavki, pa su
     stavke "lebdjele" preko stvarnog sadržaja stranice ("dupliranje" feel).

     Novi pristup — JASNA SEKVENCA U DVIJE FAZE:
       FAZA 1 (0.00s – 0.30s): Sve stavke u listi blijede istovremeno
                               (mali 0.04s stagger od dna ka vrhu),
                               parent OSTAJE potpun (opacity 1).
       FAZA 2 (0.30s – 0.50s): Stavke su već potpuno nevidljive (opacity 0),
                               parent sad fade-uje u 0 preko 0.20s.

     Pošto su stavke u FAZI 2 već nevidljive, parent može slobodno da
     fade-uje bez "dupliranja". Pošto je cijela animacija 0.50s (a ne
     1.05s), ima manje prostora za race conditions sa drugim DOM
     promjenama (header backdrop, body scroll lock, itd). */
  .nav-menu.closing {
    opacity: 0;
    visibility: visible;
    transform: translateY(0);
    pointer-events: none;
    transition:
      opacity 0.20s cubic-bezier(0.65, 0, 0.35, 1) 0.30s,
      visibility 0s linear 0.50s;
  }

  .nav-menu li {
    /* Bez separatora i podloga — linkovi sjede u listi tipografski.
       Centrirano: text-align center na li, plus stavke koje su block
       (kao CTA pill) automatski centrirane preko align-items na
       parent .nav-menu. */
    border-bottom: none;
    padding: 10px 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1),
      transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .nav-menu.open li {
    opacity: 1;
    transform: translateY(0);
  }
  /* Staggered ulaz */
  .nav-menu.open li:nth-child(1) { transition-delay: 0.10s; }
  .nav-menu.open li:nth-child(2) { transition-delay: 0.16s; }
  .nav-menu.open li:nth-child(3) { transition-delay: 0.22s; }
  .nav-menu.open li:nth-child(4) { transition-delay: 0.28s; }
  .nav-menu.open li:nth-child(5) { transition-delay: 0.34s; }
  .nav-menu.open li:nth-child(6) { transition-delay: 0.42s; }
  .nav-menu.open li:nth-child(7) { transition-delay: 0.50s; }

  /* Reverzni stagger izlaz — zadnji item izlazi prvi, prvi item zadnji.
     Trajanje stavke 0.22s, mali stagger 0.04s. Posljednji item (nth-child 1)
     ima delay 0.06s + 0.22s duration = završava na 0.28s, dakle SVE stavke
     su nevidljive prije nego parent počne fade-ovati na 0.30s. */
  .nav-menu.closing li {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.22s cubic-bezier(0.65, 0, 0.35, 1),
      transform 0.22s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .nav-menu.closing li:nth-child(7) { transition-delay: 0.00s; }
  .nav-menu.closing li:nth-child(6) { transition-delay: 0.01s; }
  .nav-menu.closing li:nth-child(5) { transition-delay: 0.02s; }
  .nav-menu.closing li:nth-child(4) { transition-delay: 0.03s; }
  .nav-menu.closing li:nth-child(3) { transition-delay: 0.04s; }
  .nav-menu.closing li:nth-child(2) { transition-delay: 0.05s; }
  .nav-menu.closing li:nth-child(1) { transition-delay: 0.06s; }

  .nav-menu a {
    font-size: 30px;
    height: auto;
    letter-spacing: -0.01em;
    font-weight: 700;
    line-height: 1.25;
  }

  /* "Kontakt" iz glavne liste sakriven na mobilnom — zamijenjen je 
     velikim CTA pill dugmetom ispod (vidi .nav-mobile-cta). */
  .nav-menu .nav-item-kontakt { display: none; }

  /* CTA pill — KONTAKT (puni se cijela širina menija, crno) */
  .nav-menu .nav-mobile-cta {
    display: block;
    margin-top: 28px;
    padding: 0;
    width: 100%;
  }
  .nav-menu .nav-mobile-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    padding: 0 36px;
    background: var(--mint-ink);
    color: var(--mint-white);
    border-radius: 999px;
    font-family: var(--font-nav);
    font-size: 13px;
    letter-spacing: 0.22em;
    font-weight: 600;
    text-transform: uppercase;
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .nav-menu .nav-mobile-cta a:hover { background: var(--mint-ink-soft); }

  /* Kratak opis studija ispod CTA — auto-margin top da se "spusti" 
     na dno overlay-a kad je vise prostora; ostaje uz CTA kad nije. */
  .nav-menu .nav-mobile-tagline {
    display: block;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 36px 0 0;
    font-family: var(--font-nav);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mint-muted);
    max-width: 36ch;
    text-align: center;
    list-style: none;
  }

  .nav-mail { display: none; }

  /* @supports override za backdrop-filter — i sa blur podrškom drzimo
     visoku neprozirnost (0.97) da tekst iza ne probija; blur dodaje
     samo suptilan frosted feel preko praktično čvrste pozadine. */
  /* Header must NOT have backdrop-filter while menu is open — that would
     turn it into a containing block for fixed descendants and clip the
     overlay to header height. The overlay itself carries the look. */
  .site-header.menu-open,
  .site-header.menu-open.scrolled {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  /* Dark-mode variant for the overlay — takođe solid (bez transparentnosti) */
  [data-theme="dark"] .nav-menu {
    background: #141414;
  }
  [data-theme="dark"] .nav-mobile-cta a {
    background: var(--mint-white);
    color: var(--mint-ink);
  }
  [data-theme="dark"] .site-header.menu-open,
  [data-theme="dark"] .site-header.menu-open.scrolled {
    background: transparent;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
    --grid-gap: 20px;
    --nav-h: 70px;
  }

  /* X button (close) MUST sit above the overlay so it stays clickable */
  .menu-toggle {
    display: flex;
    position: relative;
    z-index: 101;
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  }
  /* Bolder X state — feels like a deliberate close button, not just
     a folded hamburger. Lines thicken & lengthen slightly on open. */
  .menu-toggle.open span {
    height: 2px;
    width: 24px;
    background: var(--mint-ink);
  }
  .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* === MOBILE MENU OVERLAY ===
     Sva pravila za .nav-menu (otvoren overlay) su definisana u prvom
     mobile media query bloku iznad — ovdje su nekada bila duplikati
     koji su pregaziva.li solid pozadinu i bold. Uklonjeni su, kaskada
     sada radi kako treba. */

  /* Lang toggle stays visible on mobile but slightly smaller */
  .lang-toggle {
    height: 30px;
    padding: 0 10px;
    margin-left: 4px;
    font-size: 10px;
  }
  .theme-toggle { margin-left: 4px; width: 34px; height: 34px; }

  .stacked-card { min-height: 60vh; height: 70vh; }
  .stacked-card .stack-content { padding: 24px 22px; }
  /* Na uskim ekranima frame se suzi sa 14 na 8px da kartica diše.
     Sada se inset primjenjuje na .stack-image-wrap (slika/overlay su
     unutar njega na 100%), a ne na samu sliku/overlay. */
  .stacked-card .stack-image-wrap {
    inset: 8px;
    border-radius: calc(var(--radius) - 10px);
    clip-path: inset(0 round calc(var(--radius) - 10px));
  }
  .stacked-card .stack-content { right: 8px; bottom: 8px; }

  /* === MOBILNI FOOTER — centriran i kompaktan ===
     Po zahtjevu klijenta: sve centrirano, manji razmaci između sekcija,
     manji vertikalni padding. Logo, kolone, copyright — sve centrira se
     na horizontalnoj osi za simetričan "stage" osjećaj na malim
     ekranima (umjesto lijevo-poravnatog desktop layouta). */
  .site-footer {
    padding: 48px var(--container-padding) 22px;
    text-align: center;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }
  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-brand .footer-logo {
    /* Kompaktnija veličina na telefonu — sjedi unutar 80–110px raspona
       umjesto desktop ~140px. */
    height: clamp(72px, 22vw, 110px);
    margin-bottom: 16px;
  }
  .footer-brand p {
    margin: 0 auto;
    max-width: 32ch;
  }
  .footer-cols {
    /* Dvije kolone (Navigacija + Kontakt) ostaju side-by-side ali
       sa centriranim sadržajem. Na ekranu užem od ~360px prelaze
       u jedno-kolonski layout (vidi pravilo ispod). */
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    text-align: center;
  }
  .footer-col h4 {
    margin-bottom: 14px;
  }
  .footer-col li {
    margin-bottom: 8px;
    font-size: 14px;
  }
  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-top: 20px;
    text-align: center;
    font-size: 12px;
  }

  .form-row, .checkbox-grid { grid-template-columns: 1fr; }
  .project-gallery { grid-template-columns: 1fr; }
  .project-gallery .gallery-img.full { aspect-ratio: 4 / 3; }

  /* === PROJECT HERO COVER — na mobilnom popunjava istu površinu
     kao i ostali kadrovi galerije. Desktop pravilo daje hero-u
     width: calc(100% - 80px) i aspect-ratio 16/9 (širok, plitak), 
     što ga na malim ekranima čini vizuelno "manjim" od kvadratnijih
     4/3 kadrova ispod. Na mobilnom:
       - Bočne margine se izjednačavaju sa container-padding-om
         (~20px sa svake strane), umjesto duplog 40px sa desktopa.
       - Aspect ratio postaje 4/3 da hero matchuje vertikalnu masu
         ostalih kadrova i nosi stranicu kao glavni vizual. */
  .project-cover {
    width: fit-content;
    max-width: calc(100% - 2 * var(--container-padding));
    margin: 0 auto;
  }

  .about-stats { grid-template-columns: 1fr 1fr; }
  /* Project meta — 1 kolona na mobilnom (sa razmacima) */
  .project-meta { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; padding-top: 22px; }

  /* Project nav (← Prev | Svi projekti | Next →) na mobilnom — 
     vertikalno slaganje, centrirano, sa pristojnim razmacima
     između linkova umjesto stiješnjeno space-between na 3 ivice. */
  .project-nav {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
    padding: 36px 24px 64px;
  }
  .project-nav a { line-height: 1.5; }

  .footer-cols { grid-template-columns: 1fr; gap: 30px; }

  /* Service kartice — 1 kolona na mobilnom, zadrži foto-kartica tretman */
  .services-grid { grid-template-columns: 1fr; gap: 20px; }
  .service-card { min-height: 380px; aspect-ratio: 5 / 6; }
  .service-card .service-content { padding: 26px 24px; }

  /* Value kartice (about) — već 1 kolona od tablet breakpointa */
  .value-card { min-height: 360px; aspect-ratio: 5 / 6; }
  .value-card .value-content { padding: 26px 24px; }

  /* Inquiry forma — manji padding na mobilnom */
  .inquiry-form { padding: 28px 22px; }
  .inquiry-page-hero { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 30px; }
}

/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .split-heading .word .inner { transform: none !important; }
  .stacked-card { position: relative !important; top: auto !important; }
}

/* ============================================================
   DARK MODE
   Activated by `data-theme="dark"` on <html>.
   We override the CSS variables — everything else is already
   wired to use them, so the whole site flips together.
   ============================================================ */
[data-theme="dark"] {
  /* Body (bež u light modu) postaje skoro-crna sa toplim tonom */
  --mint-cream: #141414;           /* MAIN body bg in dark */
  --mint-cream-soft: #222222;      /* form input bg */
  --mint-cream-deep: #1C1C1C;      /* form panel, section.cream */
  /* Mint band u headeru u dark modu — koristi se za .site-header.scrolled */
  --mint-sage: #2A332D;            /* tamno mint za header */
  --mint-sage-deep: #95A78D;       /* svjetliji mint za hover */
  --mint-ink: #EFE9DF;             /* text — warm off-white */
  --mint-ink-soft: #D8D2C7;
  --mint-white: #262626;           /* shop kartice itd. */
  --mint-muted: #9A9A9A;
  --mint-line: rgba(239, 233, 223, 0.10);
}

[data-theme="dark"] html,
[data-theme="dark"] body {
  /* Sada koristi cream varijablu (koja je u dark modu zamračena) */
  background: var(--mint-cream);
}

/* MINT logo is black-on-transparent → invert so it works on dark bg */
[data-theme="dark"] .site-logo img {
  filter: invert(1);
}

/* Header u dark modu: i dalje mint trakica, samo tamniji ton */
[data-theme="dark"] .site-header.scrolled {
  background: rgba(42, 51, 45, 0.88);   /* --mint-sage tonirano */
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

/* Page transition is opacity-only now, no gradient overlay to darken. */

/* Submit button: in dark mode the dark bg + white text would invert,
   so we keep it as the brand-mint accent instead — stays visible & on-brand */
[data-theme="dark"] .submit-btn {
  background: #B5C4B0;
  color: #1A1A1A;
}
[data-theme="dark"] .submit-btn:hover {
  background: #95A78D;
}

/* Filter chips active state — keep contrast */
[data-theme="dark"] .filter-chip.active {
  background: #B5C4B0;
  color: #1A1A1A;
  border-color: #B5C4B0;
}
[data-theme="dark"] .filter-chip:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Theme toggle hover state for dark */
[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Mail icon hover state for dark — match theme toggle */
[data-theme="dark"] .nav-mail:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Lang toggle in dark mode */
[data-theme="dark"] .lang-toggle {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--mint-ink);
}
[data-theme="dark"] .lang-toggle:hover {
  background: var(--mint-sage);
  color: #1A1A1A;
  border-color: var(--mint-sage);
}

/* Icon swap */
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* Form inputs — make the focus ring visible on dark bg */
[data-theme="dark"] .form-field input:focus,
[data-theme="dark"] .form-field select:focus,
[data-theme="dark"] .form-field textarea:focus {
  border-color: #B5C4B0;
  background: #1A1A1A;
}

/* Form success message keeps a mint feel */
[data-theme="dark"] .form-success {
  background: #2A332D;
  color: var(--mint-ink);
}

/* Mobile menu drawer u dark mode-u — takođe solid, bez transparentnosti
   (da bude identicno punto cero stilu, kako je klijent zatrazio). */
@media (max-width: 768px) {
  [data-theme="dark"] .nav-menu {
    background: #141414;
  }
  [data-theme="dark"] .site-header.menu-open,
  [data-theme="dark"] .site-header.menu-open.scrolled {
    background: transparent;
  }
}

/* Make all theme-aware surfaces transition smoothly when toggling */
.site-header,
.service-card,
.shop-card,
.inquiry-form,
.shop-empty-note,
.form-field input,
.form-field select,
.form-field textarea,
.checkbox-grid label,
.filter-chip,
.submit-btn,
.site-footer,
.section,
.nav-menu {
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* ====================================================================
   ELEGANT POLISH PASS
   ====================================================================
   Layered on top of the base stylesheet so existing rules stay intact.
   Refines every MICRO-INTERACTION — hovers, focus, taps, small
   transitions — with Apple-style easings, and introduces the
   `.reveal-x` left → right scroll reveal (à la apple.com homepage).
   The SIGNATURE animations (intro loader, sticky stacked-cards,
   split-heading word reveals, page-transition fade) are NOT touched.
   ==================================================================== */

:root {
  /* Apple-signature easings — long ramp-out, soft landing. The classic
     "feels expensive" easing pair. */
  --ease-apple:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-apple-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-apple-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- APPLE-STYLE LEFT → RIGHT SCROLL REVEAL ----------
   Auto-applied via main.js to block-level content (cards, images,
   large blocks). Slides in from the left with a soft opacity ramp.
   Stagger between siblings is set on each element by main.js via
   the --reveal-delay custom property. */
.reveal-x {
  opacity: 0;
  transform: translate3d(-52px, 0, 0);
  transition:
    opacity 1.15s var(--ease-apple-soft),
    transform 1.15s var(--ease-apple-soft);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal-x.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Smoother fade-up to match the new Apple feel (no direction change —
   pairs naturally with split-heading word reveals above text). */
.fade-up {
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 1.1s var(--ease-apple-soft),
    transform 1.1s var(--ease-apple-soft);
  transition-delay: var(--reveal-delay, 0s);
}
.fade-up.in-view {
  transform: translate3d(0, 0, 0);
}

/* ---------- HEADER MICRO-POLISH ---------- */
/* Logo: barely-there scale + tiny upward drift, so it feels like
   the mark *responds* rather than zooms. */
.site-logo img {
  transition: transform 0.6s var(--ease-apple);
}
.site-logo:hover img {
  transform: translateY(-1px) scale(1.035);
}

/* Nav menu text reveal — keep the parapet effect, slow and silky. */
.nav-menu a .menu-text {
  transition: transform 0.6s var(--ease-apple);
}

/* Mail + Theme icon buttons: gentle scale + smoother bg fill. */
.nav-mail,
.theme-toggle {
  transition:
    background-color 0.45s var(--ease-apple),
    transform 0.6s var(--ease-apple),
    color 0.45s var(--ease-apple);
}
.nav-mail:hover { transform: scale(1.08); }
.theme-toggle:hover { transform: rotate(-20deg) scale(1.06); }

/* Header glass transitions silkier when state flips */
.site-header {
  transition:
    background-color 0.6s var(--ease-apple),
    box-shadow 0.6s var(--ease-apple);
}

/* Language toggle — premium fill that washes in from the left.
   The pill stays transparent on hover; a coloured ::before slides
   across, with the text colour swapping when the fill arrives. */
.lang-toggle {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition:
    color 0.5s var(--ease-apple),
    border-color 0.5s var(--ease-apple);
}
.lang-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mint-ink);
  border-radius: inherit;
  transform: translateX(-101%);
  transition: transform 0.55s var(--ease-apple);
  z-index: -1;
}
.lang-toggle:hover {
  background: transparent;          /* let ::before carry the fill */
}
.lang-toggle:hover::before {
  transform: translateX(0);
}
/* Dark-mode pill fill: use the brand sage so it stays visible. */
[data-theme="dark"] .lang-toggle::before { background: #B5C4B0; }
[data-theme="dark"] .lang-toggle:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: #1A1A1A;
}

/* ---------- STACKED-CARD HOVER POLISH (signature stays, edges refined) ---------- */
.stacked-card .stack-image {
  transition: transform 1.2s var(--ease-apple);
}
.stacked-card:hover .stack-image { transform: scale(1.05); }

.stacked-card .stack-view-indicator {
  transition:
    opacity 0.55s var(--ease-apple),
    transform 0.55s var(--ease-apple);
  transform: translate(8px, -8px);
}
.stacked-card:hover .stack-view-indicator {
  opacity: 1;
  transform: translate(0, 0);
}

/* Category underline brightens on hover (default state unchanged) */
.stacked-card .stack-category::after {
  transition: opacity 0.5s var(--ease-apple);
}
.stacked-card:hover .stack-category::after {
  opacity: 0.95;
}

/* ---------- SERVICE / SHOP / ABOUT CARDS ---------- */
.service-card {
  transition:
    transform 0.7s var(--ease-apple),
    box-shadow 0.7s var(--ease-apple),
    border-color 0.7s var(--ease-apple);
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 30px 60px -22px rgba(26, 26, 26, 0.18),
    0 6px 12px -8px rgba(26, 26, 26, 0.06);
  border-color: rgba(149, 167, 141, 0.45);
}
.service-card .service-num {
  transition:
    opacity 0.6s var(--ease-apple),
    letter-spacing 0.6s var(--ease-apple);
}
.service-card:hover .service-num {
  opacity: 0.7;
  letter-spacing: 0.18em;
}

.shop-card {
  transition:
    transform 0.7s var(--ease-apple),
    box-shadow 0.7s var(--ease-apple);
}
.shop-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px -22px rgba(26, 26, 26, 0.16);
}
.shop-card .shop-img img {
  transition: transform 1.4s var(--ease-apple);
}
.shop-card:hover .shop-img img { transform: scale(1.07); }

.about-grid .about-img img {
  transition: transform 1.6s var(--ease-apple);
}
.about-grid:hover .about-img img { transform: scale(1.05); }

/* ---------- SUBMIT BUTTON ---------- */
.submit-btn {
  transition:
    background-color 0.5s var(--ease-apple),
    color 0.5s var(--ease-apple),
    transform 0.5s var(--ease-apple),
    box-shadow 0.5s var(--ease-apple),
    letter-spacing 0.5s var(--ease-apple);
}
.submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -14px rgba(26, 26, 26, 0.35);
  letter-spacing: 0.24em;
}
.submit-btn:active {
  transform: translateY(-1px);
  transition-duration: 0.15s;
}
[data-theme="dark"] .submit-btn:hover {
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.6);
}

/* ---------- FILTER CHIPS (projects page) ---------- */
.filter-chip {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition:
    color 0.45s var(--ease-apple),
    border-color 0.45s var(--ease-apple),
    transform 0.45s var(--ease-apple);
}
.filter-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mint-ink);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-apple);
  z-index: -1;
}
.filter-chip:hover {
  background: transparent;          /* override base */
  color: var(--mint-white);
  border-color: var(--mint-ink);
  transform: translateY(-1px);
}
.filter-chip:hover::before { transform: scaleX(1); }
.filter-chip.active::before { transform: scaleX(1); }

/* Dark-mode filter-chip fill */
[data-theme="dark"] .filter-chip::before { background: #B5C4B0; }
[data-theme="dark"] .filter-chip:hover {
  color: #1A1A1A;
  border-color: #B5C4B0;
}

/* ---------- FORM FIELDS ---------- */
.form-field input,
.form-field select,
.form-field textarea {
  transition:
    border-color 0.4s var(--ease-apple),
    background-color 0.4s var(--ease-apple),
    box-shadow 0.4s var(--ease-apple);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  box-shadow: 0 0 0 4px rgba(149, 167, 141, 0.18);
}
[data-theme="dark"] .form-field input:focus,
[data-theme="dark"] .form-field select:focus,
[data-theme="dark"] .form-field textarea:focus {
  box-shadow: 0 0 0 4px rgba(181, 196, 176, 0.18);
}

.checkbox-grid label {
  transition:
    background-color 0.4s var(--ease-apple),
    transform 0.4s var(--ease-apple);
}
.checkbox-grid label:hover { transform: translateX(3px); }

/* ---------- FOOTER LINKS: animated underline from left ---------- */
.footer-col a {
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
  transition: opacity 0.45s var(--ease-apple);
}
.footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease-apple);
  opacity: 0.7;
}
.footer-col a:hover {
  text-decoration: none;            /* drop the jarring base underline */
  opacity: 0.85;
}
.footer-col a:hover::after { transform: scaleX(1); }

/* ---------- PROJECT PREV / NEXT NAV ---------- */
.project-nav a {
  display: inline-block;
  transition:
    opacity 0.45s var(--ease-apple),
    transform 0.45s var(--ease-apple),
    letter-spacing 0.45s var(--ease-apple);
}
.project-nav a:hover {
  opacity: 0.7;
  letter-spacing: 0.24em;
}
.project-nav a:first-child:hover { transform: translateX(-5px); }
.project-nav a:last-child:hover  { transform: translateX(5px); }

/* ---------- GALLERY IMAGES ---------- */
.project-gallery .gallery-img img {
  transition: transform 1.4s var(--ease-apple);
}
.project-gallery .gallery-img:hover img { transform: scale(1.06); }

/* ---------- SOCIAL / EMAIL LINKS IN INQUIRY INFO ---------- */
.inquiry-info a {
  transition:
    color 0.4s var(--ease-apple),
    opacity 0.4s var(--ease-apple);
}
.inquiry-info a:hover { opacity: 0.7; }

/* ============================================================
   PROCES STRANICA — Mersi-style scroll choreography
   ------------------------------------------------------------
   Stranica services.html prati layout i animacije
   mersi-architecture.com/process:
     1) HERO scroll-zoom: mala centrirana slika koja se širi u
        fullscreen dok skroluješ; PROCES naslov iza nje biva pokriven
     2) Kad je slika fullscreen, u uglovima izlaze velika riječi
        TEMELJ / ZAJEDNIČKI, a centralno klizi tekstualni panel
     3) Šest koraka — svaki 100vh, 50/50 split: full-bleed slika
        lijevo, cream kolona desno (naslov gore-lijevo, broj gore-desno,
        mali uokvireni kvadrat u centru sa "naš/proces" labelima
        flankiranjima, opis dole)
     4) Pratnja — finalni panel sa krupnim riječima i listom
        isporuka, slično "NOTRE ACCOMPAGNEMENT" kod Mersi-ja

   Tipografija ostaje MINT-ova: Volterra (Regular i Italic — nemamo
   bold rez, pa krupne riječi rješavamo veličinom, ne težinom),
   Inter za body/UI tekstove.

   Glavna scena (hero scroll-zoom) je driven kroz CSS varijablu --p
   (0..1) koju JS postavlja na .phero-stage prema scroll poziciji.
   Sve interpolacije (scale, opacity, translate) idu kroz calc()/clamp(),
   pa je rendering glađi i animacija ne ovisi o JS tick-rate-u.
   ============================================================ */

/* ---------- HERO SCROLL SCENE ----------
   .phero-wrap je VISOK kontejner — visina određuje koliko "scrub-a"
   imaš dok prolaziš kroz hero scenu. 250vh = ~150vh dodatnog scroll-a
   nakon početne pozicije, dovoljno za udobno scrub-anje sve faze
   (zoom + corners + panel) bez bržice. */
.phero-wrap {
  position: relative;
  height: 250vh;
  background: var(--mint-cream);
}
.phero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.phero-stage {
  position: relative;
  width: 100%;
  height: 100%;
  /* --p je scroll progress 0..1, postavljen iz JS-a.
     Default 0 da bi prikaz radio i bez JS-a (degraded ali ispravan). */
  --p: 0;
}

/* Slika koja se širi.
   Početak (p=0): centriran KVADRATAN polaroid-frame ~40vw × 50vh
                  (manji nego prije, da naslov ispod ima jasan prostor
                  i da ne dolazi do preklapanja sa caption-om)
   Kraj   (p=1): puni viewport (100vw × 100vh)
   Sve između je linearno interpolirano kroz calc().
   Pri p=0 slika ide otprilike 25vh → 75vh (50vh visoka, centar 50vh). */
.phero-img-box {
  position: absolute;
  left: 50%;
  /* KLIJENTSKA ISPRAVKA v3: slika pomjerena VIŠE (centar na 36vh) i
     SMANJENA (visina 42vh umjesto 50vh) da bi PROCES / O NAMA naslov
     ispod nje imao jasan vertikalni prostor i da donji rub slike NE
     preklapa vrh naslova. Pri p=0: slika zauzima 15vh–57vh, naslov
     je centriran na 72vh (sa visinom ~13vh, span 65.5–78.5vh) — što
     daje ~7.5vh "čistog daha" između slike i naslova.
     Kako p raste i slika prelazi u fullscreen, top se interpolira
     nazad na 50% (centar viewporta), širina na 100vw, visina na 100vh. */
  top: calc(36% + 14% * var(--p));
  transform: translate(-50%, -50%);
  /* Širina ide od 40vw do 100vw */
  width: calc(40vw + 60vw * var(--p));
  /* Visina ide od 42vh do 100vh */
  height: calc(42vh + 58vh * var(--p));
  overflow: hidden;
  z-index: 2;
  /* Polaroid-frame: cream padding + tanka linija + zaobljeni uglovi.
     Sve se postepeno gasi kako slika prelazi u fullscreen (na p=1 frame
     i radius nestaju, slika je čisti bleed bez okvira). */
  background: var(--mint-cream-soft);
  padding: calc(14px * (1 - var(--p)));
  border: 1px solid rgba(26, 26, 26, calc(0.12 * (1 - var(--p))));
  /* Border-radius: 25px (var(--radius), isti standard kao kartice na
     home stranici) pri p=0, gasi se na 0 pri p=1 da fullscreen slika
     nema čudne zaobljene uglove koji "sijeku" viewport. */
  border-radius: calc(var(--radius) * (1 - var(--p)));
  /* Početni shadow se gasi kad slika postane fullscreen */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, calc(0.6 * (1 - var(--p)))) inset,
    0 28px 64px -28px rgba(26, 26, 26, calc(0.28 * (1 - var(--p))));
  transition: box-shadow 0.4s linear;
  /* iOS Safari fix — isolation kreira novi stacking context koji
     pomaže pravilnom klipovanju zaobljene slike na mobilnom. */
  isolation: isolate;
}
.phero-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.05) contrast(1.02);
  display: block;
  /* Unutrašnja slika ima malo manji radius — proporcionalno smanjenje
     uzimajući u obzir 14px polaroid padding (radius ≈ outer − padding/2).
     Takođe se gasi do 0 pri p=1. clip-path služi kao iOS Safari fallback
     (vidi komentar u .pstep-frame img). */
  border-radius: calc((var(--radius) - 8px) * (1 - var(--p)));
  clip-path: inset(0 round calc((var(--radius) - 8px) * (1 - var(--p))));
}

/* PROCES naslov — fiksno pozicioniran na 81vh (5vh ispod donjeg ruba
   slike pri p=0, koja se završava na 75vh). Kako p raste, slika raste
   i preraste preko naslova → vizuelno "guta" ga. Z-index 1 (ispod slike).
   Veličina je umjerena (max 150px) tako da naslov ostane ČITLJIV ali
   ne overlapuje sa captionom ispod njega. */
.phero-title {
  position: absolute;
  left: 50%;
  /* KLIJENTSKA ISPRAVKA v4: line-height povećan sa 0.92 na 1.05 —
     0.92 je bio premali za Silk Serif (display rez sa serifima i
     terminalima koji se protežu ispod baseline-a), pa su donji
     djelovi slova "O NAMA" / "PROCES" "curili" ispod line box-a i
     preklapali se sa caption-om. 1.05 zadržava napetu, monumentalnu
     liniju ali daje serifima dovoljno prostora unutar line-box-a. */
  top: 72vh;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 140px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
  color: var(--mint-ink);
  z-index: 1;
  white-space: nowrap;
  /* Bledi nakon prelaska polovine animacije, da prelaz u centralni
     panel ne bude konfliktan. */
  opacity: clamp(0, calc(1 - (var(--p) - 0.35) * 4), 1);
  pointer-events: none;
}

/* "O NAMA" specifično — Volterra display u kombinaciji sa letter-spacing
   -0.03em (gore) i krupnom veličinom čini da "O" i "NAMA" izgledaju kao
   jedna riječ ("ONAMA"), jer prazni space karakter biva vizuelno progutan.
   Override-ujemo word-spacing samo na About stranici da razmak između
   riječi bude vidljiv kao 2 spejsa. Process stranica ima jednu riječ
   "PROCES" pa joj ovo ne treba. */
.about-page .phero-title {
  word-spacing: 0.3em;
}

/* Caption ispod naslova.
   KLIJENTSKA ISPRAVKA v4: caption pomjeren sa 79vh na 88vh — na 79vh je
   ulazio U TITLE bottom (Silk Serif slova "NAMA" i "PROCES" se protežu
   ispod line box-a, pa je caption "UPOZNAJTE NAŠ TIM" / "SVAKI PROJEKAT
   POČINJE..." vizuelno prelazio preko donjih dijelova slova). 88vh daje
   ~9vh praznog prostora između title bottom-a i caption top-a — caption
   je sada JASNO ISPOD naslova, kako klijent traži po skici. */
.phero-caption {
  position: absolute;
  left: 50%;
  top: 88vh;
  transform: translate(-50%, -50%);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mint-ink);
  opacity: clamp(0, calc(0.85 - var(--p) * 3.4), 0.85);
  text-align: center;
  max-width: 520px;
  width: calc(100% - 80px);
  line-height: 1.6;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}

/* Centralni tekstualni panel — pojavi se kad je slika već fullscreen
   (p ≥ 0.55). Sada je samo JEDAN red BOLDOVANOG teksta, krupniji nego
   prije, bez dodatnih linija ispod. Cream pozadina sa visokom prozirnošću
   daje "frosted glass" feel. Klizi blago odozdo dok se pojavljuje. */
.phero-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  background: rgba(239, 233, 223, 0.92);
  padding: 44px clamp(40px, 6vw, 88px);
  text-align: center;
  max-width: 880px;
  width: calc(100% - 80px);
  /* Mapiranje pojavljivanja: p=0.55 → 0, p=0.85 → 1 (panel se javlja
     ranije nego prije, jer više nema corner overlay-a koji bi prethodio). */
  opacity: clamp(0, calc((var(--p) - 0.55) * 3.33), 1);
  /* Klizajući translate: dok se panel pojavljuje, kreće od +30px ka 0
     (vertikalna komponenta interpolirana sa istom progress vrijednošću) */
  transform:
    translate(
      -50%,
      calc(-50% + 30px * (1 - clamp(0, calc((var(--p) - 0.55) * 3.33), 1)))
    );
  pointer-events: none;
}
/* FIX (dark mode): panel ima hard-kodovanu cream pozadinu, a tekst
   koristi var(--mint-ink) koji u dark temi postaje svijetao (#EFE9DF) —
   svijetlo-na-svijetlom = nevidljiv tekst. U dark modu panel dobija
   tamnu "frosted" pozadinu pa svijetli tekst ostaje čitljiv. */
[data-theme="dark"] .phero-panel {
  background: rgba(24, 26, 24, 0.88);
}
.phero-panel p {
  font-family: 'Inter', sans-serif;
  /* BOLD: pravi 700 weight, jer Volterra nema bold rez ali Inter ima. */
  font-weight: 700;
  font-size: clamp(13px, 1.05vw, 17px);
  line-height: 1.5;
  letter-spacing: 0.12em;
  margin: 0;
  color: var(--mint-ink);
  text-transform: uppercase;
}

/* ---------- ŠEST KORAKA ----------
   Svaki korak je samostalna sekcija ~100vh, JEDNA KOLONA, centrirano.
   Bez full-bleed slike — samo polaroid frame u sredini sa slikom unutra.
   Layout po vertikali:
     - Header: naslov gore-lijevo, broj gore-desno (zadržavamo ovu poziciju
       jer daje ritam i ostavlja prostor da se broj koraka brzo čita)
     - Frame: centriran u sredini kolone (i vertikalno i horizontalno)
     - Body: opis ispod frame-a, centriran */
.psteps {
  position: relative;
  z-index: 5;
  background: var(--mint-cream-deep);
}
.pstep {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  background: var(--mint-cream-deep);
  padding: 56px clamp(24px, 6vw, 88px) 72px;
  gap: 40px;
  /* Tanka linija razdvajanja između koraka — Mersi-ev minimalistički
     potez koji daje sekcijama strukturu bez teških blokova. */
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.pstep:last-child { border-bottom: none; }

/* Header — naslov gore-lijevo, broj gore-desno, na cijeloj širini
   kolone tako da imaju dovoljno prostora između. */
/* Header — naslov gore-lijevo, broj gore-desno. Šire je TAČNO ZA KOLIKO
   I FRAME ISPOD (clamp(260px, 36vw, 460px)), tako da:
     - "Kompozicija" sjedi tačno na vertikalnoj liniji LIJEVE ivice frame-a
     - "03" sjedi tačno na vertikalnoj liniji DESNE ivice frame-a
   To daje editorial "rame uz rame" osjećaj umjesto da naslov i broj
   lutaju daleko jedan od drugog na velikim ekranima. */
.pstep-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  width: 100%;
  max-width: clamp(260px, 36vw, 460px);
  margin: 0 auto;
}
.pstep-title {
  /* STARO: Raleway uppercase. FINALNO: Cormorant Garamond u TitleCase
     (ne uppercase) — Garamond sa svojim klasičnim italic-friendly
     formama izgleda elegantnije u standardnom case-u nego stisnut u
     velika slova. Tretira korake kao "poglavlja" — editorial, ne UI label. */
  font-family: var(--font-elegant);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  margin: 0;
  color: var(--mint-ink);
}
.pstep-num {
  /* Broj koraka — laka Cormorant cifra u istoj porodici. */
  font-family: var(--font-elegant);
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: 0;
  font-weight: 300;
  color: var(--mint-ink);
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
  font-style: italic;
}

/* Middle — samo frame, centriran (i hor. i vert.). Bez bočnih labela. */
.pstep-middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Uokvireni kvadrat — sada glavna i jedina slika koraka. Veći je
   nego prije jer ne dijeli pažnju sa lijevom full-bleed slikom.
   Polaroid styling: cream padding + tanka linija + zaobljeni uglovi
   (var(--radius) = 25px, isti standard kao kartice projekata na home
   stranici) + suptilan shadow. */
.pstep-frame {
  width: clamp(260px, 36vw, 460px);
  /* v-fix: aspect-ratio je prebacen na <img> (vidi ispod). WebKit ima
     bug gdje se height:100% djeteta u aspect-ratio kutiji sa paddingom
     racuna pogresno pa slika prelije preko DONJEG dijela rama. Sa
     aspect-ratio na samoj slici (height:auto) izgled je identican,
     a bug nema od cega da nastane. */
  padding: 16px;
  background: var(--mint-cream-soft);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 50px -28px rgba(26, 26, 26, 0.25);
  position: relative;
  overflow: hidden;
  /* iOS Safari fix — bez ovoga, kombinacija border-radius + overflow:hidden
     + inner img sa object-fit ponekad ne klipuje pravilno (bottom desni
     ugao "iscuri" iz zaobljenja). isolation:isolate kreira novi stacking
     context koji forsira Safari da pravilno primijeni clipping. */
  isolation: isolate;
}
.pstep-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* FIX (mobilni "ram se kida" bug): CSS filter na slici pravi zaseban
     compositing layer koji na iOS/Android GPU-u IGNORIŠE parent
     border-radius clip — slika je "curila" preko zaobljenih uglova rama.
     Desaturacija je sada ISPEČENA u same step-*.jpg fajlove (build
     korak u pripremi slika), pa filter više nije potreban — ram je
     kontinualan na svim uređajima, a GPU jeftiniji. */
  filter: none;
  display: block;
  /* Unutrašnja slika takođe zaobljena — proporcionalno manji radius
     da bi se vidio cream "passe-partout" između okvira i slike,
     kao na pravom polaroidu. (16px padding → unutrašnji radius ≈ 14px)
     KORISTIMO clip-path UMJESTO border-radius jer iOS Safari ima poznat
     bug gdje border-radius + object-fit:cover ne klipuje konzistentno
     na svim ivicama (bottom često ostane oštar). clip-path: inset()
     je pouzdaniji potez i daje identičan vizuelni rezultat. */
  border-radius: calc(var(--radius) - 11px); /* fallback za sve */
  clip-path: inset(0 round calc(var(--radius) - 11px));
}

/* Opis — centriran ispod frame-a. Širina i font se skaliraju sa
   viewportom:
     - max-width: clamp(260px, 36vw, 460px) — IDENTIČNO frame-u iznad,
       pa tekst "prati linije rama" (lijeva i desna ivica teksta su tačno
       ispod ivica slike).
     - font-size: clamp(14px, 1.1vw, 18px) — na mobilnom (≤720px) ostaje
       14px (a još manje 13px kroz mobile override), na desktopu raste
       do 18px. Stari 14px je na desktopu izgledao premali. */
.pstep-body {
  font-family: 'Inter', sans-serif;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.65;
  text-align: center;
  max-width: clamp(260px, 36vw, 460px);
  margin: 0 auto;
  color: var(--mint-ink);
  opacity: 0.82;
  font-weight: 400;
}

/* ---------- KONTAKT CTA ----------
   Završna sekcija sa centriranim KONTAKT dugmetom — isti tretman
   kao na ostalim stranicama (preko .submit-btn klase definisane
   na inquiry stranici, ali ovdje je inline iz services.html). */
.pcta {
  background: var(--mint-cream);
  padding: clamp(60px, 10vh, 120px) var(--container-padding);
  text-align: center;
  position: relative;
  z-index: 5;
}

/* ============================================================
   O NAMA — manifest blok
   ============================================================
   CENTRIRAN editorial blok teksta. Prvi pasus je "headline" tipa
   pull-quote (Volterra italic, krupniji), ostali pasusi su Inter
   SemiBold body-tekst za čitljivost.
   Sjedi ispod hero scene; padding-top i bottom su ~50% veći nego
   prije, da blok jasno "diše" između hero slike iznad i bio sekcije
   ispod. Bez slika sa strane — fokus je čisto na tipografiji. */
.about-manifesto {
  background: var(--mint-cream);
  /* Top i bottom padding povećani ~50% (sa 100-160 → 150-240; sa 80-120 → 120-180)
     po klijentskoj ispravci — manifest treba jasan zraku prostora i
     iznad i ispod. */
  padding: clamp(150px, 21vh, 240px) var(--container-padding)
           clamp(120px, 15vh, 180px);
  position: relative;
  z-index: 5;
}
.about-manifesto-inner {
  /* CENTRIRAN (margin: 0 auto) umjesto pinovan uz lijevu ivicu —
     klijentska ispravka. Max širina drži red duginu udobnom za
     čitanje (~880px je editorial sladak spot). */
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
  text-align: center;
}
/* Prvi pasus = .lead → krupna ITALIC izjava (pull-quote feel).
   STARO: Volterra italic — bilo elegantno ali se loše čitalo.
   ETAPA 2: Raleway italic — čitljivo ali sans-serif djelovao strano
   pored Volterra serif naslova.
   FINALNO (klijent): Cormorant Garamond italic — pravi italic Garamond,
   u istoj serifskoj porodici kao Volterra, ali bez ekstremnog display
   kontrasta — savršen pull-quote feeling, čitljiv i u skladu sa
   ostatkom sajta. Veličina malo veća jer Cormorant ima manji x-height
   od Raleway i italic dijelovi su grafičniji. */
.about-manifesto p.lead {
  font-family: var(--font-elegant);
  font-style: italic;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--mint-ink);
  margin: 0;
  margin-bottom: 12px;
}
/* Body pasusi manifesta — tanak, miran tekst (klijentska ispravka:
   ranije SemiBold 600 je djelovao pretesko/nametljivo). */
.about-manifesto p.body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--mint-ink);
  margin: 0;
}

/* ============================================================
   O NAMA — bio blok
   ============================================================
   Lijevo placeholder za fotografiju autora, desno mali podnaslov
   (Volterra display, kao step-title u Procesu) + kratak bio.
   Sjedi nakon manifest sekcije, sa razmakom prirodno produženim
   kroz padding-top. */
.about-bio {
  background: var(--mint-cream);
  /* Padding-top povećan ~50% (sa 40-80 → 60-120) po klijentskoj
     ispravci, kombinovano sa povećanim padding-bottom manifesta
     iznad daje ukupan razmak od 180-300px između manifest teksta i
     "Osnivač" podnaslova — jasna ali ne preteška pauza. */
  padding: clamp(60px, 9vh, 120px) var(--container-padding)
           clamp(80px, 10vh, 120px);
  position: relative;
  z-index: 5;
}
.about-bio-grid {
  /* Klijentska ispravka: jedna centrirana kolona — tekst iznad,
     slika ispod, sve po sredini stranice. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vh, 48px);
  text-align: center;
  max-width: 1280px;
  margin: 0 auto;
}
.about-bio-image {
  /* FIX: frame centriran u svojoj koloni (ranije flex-start — sa
     uklonjenim bio tekstom kompozicija je djelovala nakrivo). */
  display: flex;
  justify-content: center;
}
.about-bio-frame {
  width: 100%;
  max-width: 420px;
  /* v24: bez fiksnog aspect-ratio — fotografija osnivača se prikazuje
     KOMPLETNA u prirodnim proporcijama (4/5 je sjekao donji dio kadra). */
  padding: 14px;
  background: var(--mint-cream-soft);
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 50px -28px rgba(26, 26, 26, 0.25);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.about-bio-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.04);
  display: block;
  border-radius: calc(var(--radius) - 11px);
  clip-path: inset(0 round calc(var(--radius) - 11px));
}
.about-bio-text {
  display: grid;
  gap: 18px;
  justify-items: center;
}
.about-bio-title {
  /* STARO: Raleway uppercase. FINALNO: Cormorant Garamond uppercase —
     u istoj serifskoj porodici kao display tipografija, sa generoznim
     letter-spacing-om koji uravnoteži tanje Garamond poteze. Suptilan
     label-feel, ne nadjačava bio tekst. */
  font-family: var(--font-elegant);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.2;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
  color: var(--mint-ink);
  opacity: 0.7;
}
.about-bio-body p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.7;
  font-weight: 400;
  color: var(--mint-ink);
  opacity: 0.85;
  margin: 0 0 18px 0;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.about-bio-body p:last-child { margin-bottom: 0; }
/* Ime osnivača ispod "Osnivač" podnaslova — polu-bold, blago krupnije,
   ali ne agresivno naglašeno (klijentska ispravka). */
.about-bio-body .bio-name {
  font-weight: 600;
  font-size: clamp(17px, 1.3vw, 21px);
  letter-spacing: 0.01em;
  opacity: 1;
}

/* ---------- Responsive za O NAMA blokove ---------- */
@media (max-width: 900px) {
  .about-manifesto p.lead { font-size: clamp(26px, 7vw, 38px); }
  .about-manifesto p.body { font-size: clamp(15px, 4vw, 19px); }

  .about-bio-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-bio-image { justify-content: center; }
  .about-bio-frame { max-width: 360px; }
  .about-bio-text { padding-top: 0; }
}

/* ============================================================
   RESPONSIVE — tablet & mobile
   ============================================================ */
@media (max-width: 1100px) {
  .pstep {
    padding: 48px clamp(24px, 5vw, 48px) 64px;
    gap: 36px;
  }
  /* Frame, header i body — svi prate ISTU formulu širine, da tri reda
     (naslov+broj / slika / opis) ostanu vertikalno poravnati. */
  .pstep-frame  { width:     clamp(220px, 50vw, 380px); }
  .pstep-header { max-width: clamp(220px, 50vw, 380px); }
  .pstep-body   { max-width: clamp(220px, 50vw, 380px); }

  /* Hero: malo manje agresivni skalovi jer mobilni screen je uži —
     slika polazi šire u procentima da popuni vizuelno usko polje.
     Visina smanjena (36vh) prati desktop logiku — naslov ispod ima
     dovoljno prostora bez preklapanja. */
  .phero-img-box {
    top: calc(34% + 16% * var(--p));
    width: calc(62vw + 38vw * var(--p));
    height: calc(36vh + 64vh * var(--p));
  }
}

@media (max-width: 720px) {
  .phero-wrap { height: 220vh; }
  .phero-title { font-size: clamp(44px, 18vw, 96px); }
  .phero-caption {
    font-size: 10px;
    padding: 0 24px;
  }
  .phero-img-box {
    top: calc(32% + 18% * var(--p));
    width: calc(78vw + 22vw * var(--p));
    height: calc(32vh + 68vh * var(--p));
  }
  .phero-panel {
    padding: 28px 28px;
  }
  .phero-panel p { font-size: 11px; letter-spacing: 0.08em; }

  .pstep {
    min-height: auto;
    padding: 48px 24px 56px;
    gap: 32px;
  }
  .pstep-title { font-size: clamp(22px, 6.5vw, 30px); letter-spacing: 0; }
  .pstep-num { font-size: clamp(18px, 5vw, 24px); }
  /* Frame, header i body i dalje ostaju poravnati. Mobile font size
     ostaje 13px (manji nego desktop) za guste viewporte. */
  .pstep-frame  { width:     clamp(220px, 70vw, 340px); }
  .pstep-header { max-width: clamp(220px, 70vw, 340px); }
  .pstep-body   { max-width: clamp(220px, 70vw, 340px); font-size: 13px; }
}

/* ---------- REDUCED MOTION ----------
   Ako korisnik traži manje pokreta, fiksiramo --p na 0 (vidi i JS).
   Za sigurno: i CSS deaktivira centralni panel (jer scrub-zavisan je),
   slika ostaje u "mirnoj" maloj formi, PROCES naslov ostaje vidljiv. */
@media (prefers-reduced-motion: reduce) {
  .phero-panel { opacity: 0 !important; }
  /* Slika ostaje u manjem centriranom obliku kao da je p=0. */
}

/* ---------- REDUCED MOTION ----------
   The base reduced-motion rule already neutralises long durations.
   Make sure reveal-x lands instantly visible — no hidden content. */
@media (prefers-reduced-motion: reduce) {
  .reveal-x,
  .reveal-x.in-view {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ====================================================================
   PREMIUM POLISH PASS — "the details others miss"
   ====================================================================
   Selection colour, scroll progress, keyboard focus, image fade-in,
   custom mini-cursor, magnetic-friendly submit button, refined
   loading / disabled states. Each piece is small, but together they
   add the "wait — this site is different" feeling.
   ==================================================================== */

/* ---------- CUSTOM TEXT SELECTION ----------
   Default blue browser selection is the giveaway of a generic site.
   We swap it for the brand sage so every word the visitor highlights
   stays on-brand. */
::selection {
  background: var(--mint-sage);
  color: var(--mint-ink);
}
::-moz-selection {
  background: var(--mint-sage);
  color: var(--mint-ink);
}
[data-theme="dark"] ::selection {
  background: #B5C4B0;
  color: #1A1A1A;
}
[data-theme="dark"] ::-moz-selection {
  background: #B5C4B0;
  color: #1A1A1A;
}

/* ---------- CUSTOM FOCUS RING (keyboard nav only) ----------
   `:focus` (mouse + keyboard) gets neutralised — :focus-visible
   re-introduces a beautiful sage outline that ONLY appears for
   keyboard users. Mouse clicks stay clean, keyboard users still
   see exactly where they are. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--mint-sage-deep);
  outline-offset: 4px;
  border-radius: 6px;
  transition: outline-offset 0.2s var(--ease-apple);
}
[data-theme="dark"] :focus-visible {
  outline-color: #B5C4B0;
}

/* ---------- SCROLL PROGRESS BAR ----------
   A 2px sage line at the very top of the viewport that fills as the
   visitor scrolls through the page. Subtle, never demanding, but
   gives a constant sense of "where am I in this page." */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  z-index: 101;          /* above header (100), below loader (10000) */
  background: transparent;
}
.scroll-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mint-sage-deep);
  transform-origin: left center;
  transform: scaleX(var(--scroll-progress, 0));
  /* No transition — scroll is naturally continuous. */
}
[data-theme="dark"] .scroll-progress::before {
  background: #B5C4B0;
}

/* ---------- IMAGE LAZY-LOAD FADE-IN ----------
   No more "pop" when a project photo finishes loading. The image
   class is added by main.js; the .loaded flag is added when the
   load event fires (or immediately if it's already cached). */
img.img-fade {
  opacity: 0;
  transition: opacity 0.9s var(--ease-apple);
}
img.img-fade.loaded { opacity: 1; }

/* ---------- MINI CURSOR FOLLOWER (desktop only) ----------
   A small sage dot trails the cursor with a soft lag, and grows
   into a gentle halo when the cursor is over an interactive
   element. Native cursor stays visible — this is a complement,
   not a replacement. Completely disabled on touch / coarse-pointer
   devices. */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint-sage-deep);
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  /* JS sets --cx and --cy each frame via requestAnimationFrame */
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) translate(-50%, -50%);
  transition:
    width 0.4s var(--ease-apple),
    height 0.4s var(--ease-apple),
    background-color 0.4s var(--ease-apple),
    opacity 0.35s var(--ease-apple);
  /* The transform itself is rAF-driven, no transition on it. */
}
.cursor-dot.is-visible { opacity: 0.85; }
.cursor-dot.is-hover {
  width: 32px;
  height: 32px;
  background: rgba(149, 167, 141, 0.22);
  opacity: 1;
}
[data-theme="dark"] .cursor-dot { background: #B5C4B0; }
[data-theme="dark"] .cursor-dot.is-hover {
  background: rgba(181, 196, 176, 0.20);
}
/* Coarse-pointer (touch) devices: dot has no business existing. */
@media not all and (hover: hover) and (pointer: fine) {
  .cursor-dot { display: none !important; }
}

/* ---------- SUBMIT BUTTON — MAGNETIC TRANSFORM ----------
   The hover lift and the magnetic pull both write to `transform`,
   so they need to compose. We route both through CSS custom
   properties — main.js sets --magnet-x/y as the cursor moves
   inside the button, and the hover/active states layer the lift on
   top. Earlier "polish pass" submit-btn rules sit above this in
   the cascade, but this rule's `transform` declarations win because
   they come later. */
.submit-btn {
  --magnet-x: 0px;
  --magnet-y: 0px;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  transition:
    background-color 0.5s var(--ease-apple),
    color 0.5s var(--ease-apple),
    box-shadow 0.5s var(--ease-apple),
    letter-spacing 0.5s var(--ease-apple),
    transform 0.4s var(--ease-apple);
}
.submit-btn:hover {
  transform: translate3d(var(--magnet-x), calc(var(--magnet-y) - 3px), 0);
}
.submit-btn:active {
  transform: translate3d(var(--magnet-x), calc(var(--magnet-y) - 1px), 0);
}

/* Disabled state — reset everything to neutral. Beats earlier
   hover rules in cascade because :disabled selectors are listed
   last. The base "opacity: 0.6; cursor: not-allowed" still applies
   from the original .submit-btn:disabled. */
.submit-btn:disabled,
.submit-btn:disabled:hover,
.submit-btn:disabled:active {
  transform: translate3d(0, 0, 0);
  letter-spacing: 0.2em;
  box-shadow: none;
}

/* Submitting state — gentle 2-second pulse on the button so the
   visitor knows something IS happening, even on a slow network.
   main.js adds .is-submitting just before the fetch; the inline
   form handler flips btn.disabled to false on error, which is why
   we gate the animation on :disabled — that way the pulse stops
   automatically when the button is re-enabled, without needing
   any extra cleanup code. */
.submit-btn.is-submitting:disabled {
  animation: submitPulse 1.4s var(--ease-apple) infinite;
}
@keyframes submitPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ---------- PROJECT COVER PARALLAX ----------
   The hero cover on a project detail page slowly drifts vertically
   as the visitor scrolls — gives the image a "behind the glass"
   depth quality. Scaled up a touch so the translation never reveals
   an edge. Translation amount is rAF-driven by main.js. */
.project-cover {
  overflow: hidden;
}
.project-cover img {
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.08);
}

/* ---------- BLOCK ANCHOR-LINK BREATHING ROOM ----------
   When the scroll-progress bar lives at the top, anchor-jumps
   shouldn't shove a heading underneath it. Reserve room. */
:target { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ---------- REDUCED-MOTION DISCIPLINE ----------
   Everything heavy switches off when the user prefers less motion. */
@media (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .scroll-progress { display: none !important; }
  .project-cover img {
    transform: scale(1) !important;
  }
  .submit-btn.is-submitting { animation: none !important; }
  img.img-fade,
  img.img-fade.loaded {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* === VRLO USKI EKRANI (iPhone SE i sl.) ===
   Ispod 380px footer-cols u dva stupca postaje stešnjen — prelazimo
   na jedan stubac sa centriranim sadržajem. Mali iPhone-i (320–375)
   i ovaj fallback dobro odrade. */
@media (max-width: 380px) {
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ====================================================================
   v19 MOBILE FRAME FIXES + UNIVERSAL ASPECT-RATIO ROBUSTNESS
   ====================================================================
   Ovaj blok je dodan u v19 da rješi tri grupe bug-ova na telefonu:
   
   1. Cream "passe-partout" ramovi na stacked karticama (index, projects)
      su treperili tokom scroll-a — kombinacija filter:blur na roditelju
      + clip-path na djetetu lomi clip ivice na iOS Safari i Android
      Chrome GPU-ovima.
   2. Početna je flickerovala tokom intro morph-a — heavy peek slika
      + resize event u sredini paint frame-a + initial snap pre-StackedScroll.
   3. Project i About stranice su baguvale i poslije load-a — permanent
      will-change layer na project-cover i filter+clip-path na about-bio.
   
   Takođe (i ovo je najvažnije za održavanje): postavlja UNIVERSAL FRAME
   ROBUSTNESS sloj — bilo koji aspect-ratio slike koju kasnije ubaciš
   (vertikalni portret, ultra-wide, kvadrat) NEĆE lomiti ram. Princip:
   kontejner diktira aspect-ratio, slika se kropuje preko object-fit:cover,
   cream background na svakom image-wrapper-u "puni" sub-pixel rupe između
   slike i border-radius-a, single clipping mehanizam (overflow + border-radius
   bez dupliranog clip-path-a), GPU-friendly translateZ na clipped djetetu.
   ==================================================================== */

/* ---------------- 1. STACKED-CARD FRAME FIX (index, projects) -------- */

/* Mobile / touch / narrow viewport — skidamo filter:blur sa stacked
   kartica. JS u v19 već preskače blur write, ali ovo je defensive
   layer: čak i ako stari main.js bude keširan u browseru, filter ostaje
   none. will-change se reducira na samo transform (filter sloj GPU-u
   više ne treba). */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .stacked-card .stack-inner {
    /* v19.6: vraćamo will-change: transform (umjesto auto) — GPU layer
       je potreban za glatak scale efekat dok skroluješ. Bez njega,
       scale animacija ide preko CPU paint-a što je trzavo na slabijim
       telefonima.
       
       filter: none !important ostaje — kombinacija filter:blur na 
       roditelju + clip-path na djetetu (.stack-image-wrap) proizvodi 
       shimmer ivicu rama na mobilnom GPU-u. JS preskače pisanje filter
       inline-a kada je touch, ali ovo je defensive sloj. */
    will-change: transform;
    filter: none !important;
  }
}

/* v19.4 STICKY STACK Z-ORDER FIX (mobile/tablet)
   ====================================================================
   Bug: na touch uređajima prva kartica je ostajala "zaglavljena" pri
   skrolanju — sljedeća kartica nije vizuelno prelazila preko nje. 
   
   Root cause: .stack-inner ima permanentno `transform: translateZ(0)`
   (vidi pravilo na ~liniji 983) + `will-change: transform, filter`.
   To svaku .stack-inner promoviše u zaseban compositor layer. Sa više
   sticky .stacked-card elemenata gdje svaki nosi sopstveni GPU layer,
   iOS Safari (i nekoliko Android Chrome verzija) tokom paint-a ne
   poštuje DOM redoslijed već redoslijed kreiranja layera — pa prva
   kartica ostaje na vrhu i pokriva sljedeću.
   
   Trostruka odbrana:
   1. `isolation: isolate` na svakoj .stacked-card — formalizuje
      stacking context na nivou same kartice (ne unutrašnjeg wrappera).
      Compositor sada zna granice slojeva.
   2. Eksplicitni z-index po DOM redosljedu — postavlja JS u
      StackedScroll konstruktoru (vidi main.js, v19.4 komentar).
   3. Na touch uređajima ukidamo translateZ(0) sa .stack-inner —
      JS-pisani inline transform je sada samo scale(), bez "hint"-a
      za zaseban GPU layer. Scale i dalje radi glatko (moderni
      browseri GPU-akceleriraju scale i bez eksplicitnog translateZ),
      ali svaka .stack-inner ostaje u glavnom paint sloju gdje
      DOM redoslijed = paint redoslijed.
   ==================================================================== */

/* Sloj 1: isolation na samoj kartici. Primjenjuje se na svim 
   viewport-ima — i na desktopu je benign (ionako paint radi po DOM
   redosljedu), a na mobilnom rješava bug. */
.stacked-card {
  isolation: isolate;
}

/* v19.6: Dopunski CSS z-index po nth-child redosljedu. Ovo postoji uz JS
   z-index assignment iz StackedScroll konstruktora — CSS pravilo se
   primjenjuje u render flow-u prije JS-a, što iOS Safari koristi pri
   prvoj kompozitorskoj odluci. Inline JS z-index dolazi kasnije i možda
   ne prevazilazi inicijalnu odluku layera. CSS pravilo ovdje garantuje
   da od trenutka prve render slike kartica N stoji iznad kartice N-1.
   8 selektora pokriva tipičan broj projekata; ako budeš imao više od 8,
   nema problema — JS i dalje nastavlja z-index assignment iz konstruktora. */
.stacked-grid > .stacked-card:nth-child(1) { z-index: 1; }
.stacked-grid > .stacked-card:nth-child(2) { z-index: 2; }
.stacked-grid > .stacked-card:nth-child(3) { z-index: 3; }
.stacked-grid > .stacked-card:nth-child(4) { z-index: 4; }
.stacked-grid > .stacked-card:nth-child(5) { z-index: 5; }
.stacked-grid > .stacked-card:nth-child(6) { z-index: 6; }
.stacked-grid > .stacked-card:nth-child(7) { z-index: 7; }
.stacked-grid > .stacked-card:nth-child(8) { z-index: 8; }

/* Hover-only pravila za sve foto-kartice. Bez ovoga, tap na touch
   uređaju "zaglavi" hover state i scale ostane primijenjen do sljedećeg
   tap-a — što kombinovano sa clip-path-om proizvodi shimmer ivicu. */
@media (hover: none), (pointer: coarse) {
  .stacked-card:hover .stack-image,
  .service-card:hover .service-img,
  .value-card:hover .value-img,
  .project-gallery .gallery-img:hover img {
    transform: none !important;
  }
  .stacked-card:hover .stack-inner,
  .service-card:hover,
  .value-card:hover {
    transform: none !important;
    /* Sjenka može da ostane na hover stanju za visual feedback */
  }
}

/* ---------------- 2. PROJECT-COVER MOBILE FIX ------------------------ */

/* Originalno (linija ~3789-3795) project-cover img ima permanent
   will-change:transform + scale(1.08) na svim viewport-ima — ali JS
   parallax radi samo na desktop (supportsHover gate). Na mobilnom to
   znači permanent compositor layer koji ništa ne animira, ali baguje
   kad drugi layeri (sticky header) repaintaju. */
@media (hover: none), (pointer: coarse) {
  .project-cover img {
    will-change: auto;
    transform: none;
  }
}

/* ---------------- 3. ABOUT-BIO-FRAME MOBILE FIX ---------------------- */

/* filter:grayscale na slici unutar clip-path roditelja proizvodi
   isti shimmer kao kod stacked kartica. Na telefonu dropujemo grayscale
   (zadržavamo blagi contrast — taj nema render bug). Vizuelno se gotovo
   ne razlikuje od desktop verzije. */
@media (hover: none), (pointer: coarse) {
  .about-bio-frame img {
    filter: contrast(1.04);
  }
}

/* ---------------- 4. INITIAL-LOAD ANTI-FLICKER ----------------------- */

/* Stacked grid je inline renderovan (HTML script gradi kartice prije
   nego main.js stigne da inicijalizuje StackedScroll). Tih 50-150ms
   kartice su u natural pozicijama bez scale/blur — main.js onda
   "snap-uje" sve odjednom kroz paint(true). Sakrijemo kartice dok
   .is-ready klasa ne stigne (postavlja je StackedScroll konstruktor). */
.stacked-grid:not(.is-ready) .stacked-card {
  opacity: 0;
  /* Bez transition-a — želimo instantnu nevidljivost, ne fade */
  transition: none;
}
.stacked-grid.is-ready .stacked-card {
  opacity: 1;
  transition: opacity 0.45s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ====================================================================
   UNIVERSAL FRAME ROBUSTNESS — radi sa BILO KOJIM aspect-ratio slike
   ====================================================================
   Ovaj sloj garantuje da ramovi (cream passe-partout, project cover,
   gallery, service/value kartice, about-bio) ostaju vizuelno čisti
   bez obzira na to kakvu sliku kasnije ubaciš:
   
   - Portret 9:16, pejzaž 21:9, kvadrat, panorama — svi će se cropovati
     centrirano preko object-fit:cover unutar svog kontejnera.
   - Sub-pixel gap između slike i border-radius ivice se popuni
     CREAM bojom (matching frame), pa nikad ne vidiš "rupu" niti
     transparentnu liniju na ivici.
   - display:block uklanja inline-bottom-gap koji Safari povremeno
     ostavlja ispod <img> elemenata kao 1px hairline.
   - backface-visibility:hidden + translateZ(0) na slici forsira GPU
     da clip ivice mapira na cijele piksele (nema shimmer pri scale).
   - object-position:center daje predvidiv crop fokus.
   - aspect-ratio na kontejneru znači da visina NIKAD ne zavisi od
     natural dimensions slike — ako ubaciš 4000x3000 ili 800x1200,
     kontejner ostaje isti, slika se prilagodi.
   ==================================================================== */

/* Cream "fill" boja na svim frame kontejnerima — popuni svaki
   sub-pixel gap između cropovane slike i rounded ivice rama. */
.stacked-card .stack-image-wrap,
.about-bio-frame,
.project-cover,
.project-gallery .gallery-img,
.service-card,
.value-card {
  background-color: var(--mint-cream-soft);
}

/* Univerzalno: slika unutar bilo kog rama. Ova pravila se primjenjuju
   na SVE buduće slike koje budeš mijenjao — ne moraš ništa dodatno
   konfigurisati po slici. */
.stacked-card .stack-image,
.about-bio-frame img,
.project-cover img,
.project-gallery .gallery-img img,
.service-card .service-img,
.value-card .value-img {
  display: block;                   /* uklanja inline-bottom 1px gap */
  width: 100%;
  height: 100%;
  object-fit: cover;                /* bilo koji aspect → kropuje */
  object-position: center;          /* predvidiv crop fokus */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;      /* clean GPU clip rendering */
}

/* Tolerantnost na slike sa transparent kanalom (PNG, WebP) — ako
   ubaciš PNG sa providnim ćoškovima, vidiš cream frame ispod, ne
   defaultnu belu/crnu boju browsera. */
.stacked-card .stack-image,
.about-bio-frame img,
.project-cover img,
.project-gallery .gallery-img img,
.service-card .service-img,
.value-card .value-img {
  background-color: var(--mint-cream-soft);
}

/* Aspect-ratio fallback za STARI Safari (<15.4) — ako property nije
   podržan, slika bi mogla da odredi visinu kontejnera. min-height
   garantuje da i bez podrške frame ne kolabira ako ubaciš tiny
   thumbnail kao test. */
@supports not (aspect-ratio: 1) {
  .project-gallery .gallery-img { min-height: 260px; }
  .project-gallery .gallery-img.full { min-height: 360px; }
  .service-card { min-height: 420px; }
  .value-card { min-height: 380px; }
}

/* Extra defensive: ako budeš ubacivao slike sa različitim background
   bojama (npr. cropovan render sa belom pozadinom uz crni eksterijer),
   i ako pri tom slika ima blagu transparency na ivicama (anti-aliasing
   crop), cream background na kontejneru garantuje da prelaz bude
   na cream a ne na nešto neočekivano. */

/* ====================================================================
   v19.1 IMAGE LOAD-STATE — sprječava "razbijena kartica" stanje
   ====================================================================
   Bug koji ovo rješava: dok se cover slika stacked kartice učitava,
   prazno <img> polje + .stack-overlay (gradient transparent→tamno)
   stvaraju razbijen vizuelni state — cream ram sa tamnim gradientom
   pri dnu i bez ikakve slike unutra (vidi screenshot 27.maj).
   
   Strategija: dok wrap NEMA klasu .is-loaded, oba elementa (slika
   I overlay) su opacity:0. JS u index.html i projects.html dodaje
   .is-loaded klasu kad image load event okine (ili error — graceful
   degradation: ako slika fail-uje, dignemo klasu da overlay ne
   ostane zauvijek skriven). Ranije će vidjeti samo cream ram (čist,
   namjeran look) umjesto polovičnog gradient overlay-a bez slike.
   ==================================================================== */

/* Dok image nije loaded: i slika i overlay su nevidljivi. Kartica
   prikazuje samo cream ram (potpuno čist look, kao "loading state"
   namjernog dizajna). */
.stacked-card .stack-image-wrap:not(.is-loaded) .stack-image,
.stacked-card .stack-image-wrap:not(.is-loaded) .stack-overlay {
  opacity: 0;
}

/* Kad image load event okine, JS doda .is-loaded — oba se fade-in
   skupa preko 0.45s. Overlay sa blagim delay-em da slika prvo "sleti"
   pa onda gradient legne na nju (elegantnije čitanje). */
.stacked-card .stack-image-wrap.is-loaded .stack-image {
  opacity: 1;
  /* FIX (hover bug): ovo pravilo ima vecu specificnost od
     `.stacked-card .stack-image` pa je njegov transition (samo opacity)
     brisao transform tranziciju cim se slika ucita — hover zoom je zato
     bio INSTANT umjesto glatkih 1.2s. Transform mora biti u listi. */
  transition:
    opacity 0.45s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 1.2s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1));
}
.stacked-card .stack-image-wrap.is-loaded .stack-overlay {
  opacity: 1;
  transition: opacity 0.45s var(--ease-apple, cubic-bezier(0.22, 1, 0.36, 1)) 0.1s;
}

/* v19.2 — UKLONJEN nepotrebni fallback animation.
   Ranije je ovdje postojao @keyframes mintImageFallbackShow koji je
   nakon 2s prisilno postavljao opacity:1 na image i overlay — kao
   "safety net" za slučaj da load event ne stigne. ALI: <img> elementi
   UVIJEK fire-uju ili load ili error event (nema treće mogućnosti
   u modernim browser-ima), pa je fallback bio bespotreban.
   
   I gore od toga, na sporijoj mobilnoj vezi gdje slika treba >2s
   da stigne, fallback je prikazivao overlay (tamni gradient pri dnu
   kartice) PRIJE nego što je slika gotova — što je vidljivo kao
   "razbijena kartica" sa cream ramom + tamnim gradientom bez slike.
   
   Sada čekamo load event 100%. Ako slika kasni, korisnik vidi čist
   cream ram (loading state izgleda namjeran), nikad razbijenu verziju. */

/* ====================================================================
   v19.3 INQUIRY PAGE — DESKTOP COMPACT MAP TOGGLE + CLEAN INFO BLOCK
   ====================================================================
   Tri vezane izmjene po zahtjevu klijenta (samo desktop):
   1. Toggle "Mapa / Satelit" sjedi UNUTAR mape (gornji-desni cošak),
      a ne iznad nje — kompaktnije.
   2. Pošto toggle više ne jede 46px vertikalnog prostora iznad mape,
      mapa se rasteže do dna .inquiry-heading-col-a, što kroz grid
      stretching automatski poklapa DONJU IVICU mape sa DONJOM IVICOM
      forme desno (oba na istoj horizontalnoj liniji).
   3. Border-top divider na .info-block-u se uklanja kada intro paragraf
      nije prisutan — bez toga linija je orphaned (visi između naslova
      i info bloka bez svrhe).
   
   Mobile / tablet (≤1100px) ostaje kao prije: stack layout, toggle
   iznad mape, mapa fixed visina 360px. Ne mijenja se ništa.
   ==================================================================== */

/* Conditional cleanup divider na info-block-u: koristi :has() da provjeri
   da li ima sibling .inquiry-intro u .inquiry-info-u. Ako nema (kao sad),
   ukloni border-top + padding-top da info blok teče prirodno ispod h1.
   :has() je supported u svim modernim browser-ima (Safari 15.4+, Chrome 105+,
   Firefox 121+). Ako neki stari browser ne podržava — fallback je da
   linija ostane (subtle, ne lomi layout). */
@supports selector(:has(*)) {
  .inquiry-info:not(:has(p.inquiry-intro)) .info-block {
    border-top: none;
    padding-top: 0;
    margin-top: 4px;
  }
}

/* Desktop only — overlay map toggle inside map */
@media (min-width: 1101px) {
  .inquiry-map-wrap {
    /* Eksplicitno position:relative (već jeste u base CSS-u, ali ovdje
       potvrđujemo) — toggle dolje koristi ovo kao positioning kontekst. */
    position: relative;
  }
  
  /* Toggle sjedi u gornji-desni cošak mape, iznad Leaflet tile-ova.
     Translucent cream bg + backdrop-blur čine ga čitljivim preko bilo
     koje pozadine (light/dark/satellite). z-index 500 stavlja ga iznad
     Leaflet kontrola (zoom +/- koristi z-index do 400) ali ispod
     popup-ova (650+). */
  .inquiry-map-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 500;
    margin-bottom: 0;
    /* Pojačan kontrast za čitljivost preko mape — translucent cream
       sa subtle shadow. Backdrop-filter daje "frosted glass" osjećaj
       koji se uklapa u brand language (vidi header.scrolled). */
    background: rgba(245, 241, 232, 0.92);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    box-shadow:
      0 2px 12px rgba(0, 0, 0, 0.15),
      0 1px 0 rgba(255, 255, 255, 0.5) inset;
  }
  
  /* Dark mode — tamna translucent varijanta da ne sija na noćnoj mapi */
  [data-theme="dark"] .inquiry-map-toggle {
    background: rgba(20, 20, 20, 0.82);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
      0 2px 14px rgba(0, 0, 0, 0.4),
      0 1px 0 rgba(255, 255, 255, 0.08) inset;
  }
  
  /* Pošto toggle više ne sjedi iznad mape kao zaseban red, mapa
     popunjava cijelu visinu wrap-a — donja ivica mape sad se direktno
     poklapa sa donjom ivicom .inquiry-heading-col-a, koji je kroz
     grid align-self:stretch izjednačen sa visinom .inquiry-form-a.
     Rezultat: donja linija mape == donja linija forme. */
}

/* v19.6 NOTE: prethodni blok "v19.5 HOVER ZOOM REFINEMENT" ovdje je
   uklonjen. Pokušao sam da "popravim" hover sa custom --ease-zoom
   curve i dužim trajanjem, ali je u prošlosti rezultat bio gori od
   originalnog v4 ponašanja (1.2s sa --ease-apple, definisan ranije na
   liniji 2798). Korisnik je potvrdio da v4 verzija ima ispravnu
   hover animaciju, pa vraćamo originalni baseline. */



/* ====================================================================
   v24 — PROJECT HERO BEZ KROPOVANJA
   Hero render na stranici projekta se prikazuje cijeli, u prirodnim
   proporcijama, za svaki projekat automatski. Override na kraju fajla
   namjerno: pobjeđuje universal frame pravila (width/height 100% +
   object-fit:cover) i parallax baseline (scale 1.08 — parallax je
   isključen ovdje jer po definiciji zahtijeva overscan krop).
   ==================================================================== */
.project-cover img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain !important;
  transform: none !important;
  will-change: auto !important;
}

/* v24 — FOTOGRAFIJA OSNIVAČA BEZ KROPOVANJA (prirodne proporcije,
   ram grli sliku; override universal frame pravila). */
.about-bio-frame img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}