/* ==========================================================================
   Advokat Mihajlo Savić — Leskovac
   Old money / heritage estetika
   --------------------------------------------------------------------------
   1.  Tokeni
   2.  Reset i osnove
   3.  Tipografija
   4.  Layout pomoćne klase
   5.  Dugmad i linkovi
   6.  Monogram
   7.  Header i navigacija
   8.  Hero
   9.  Uvod
   10. Glavna oblast rada
   11. Ostale oblasti
   12. O advokatu
   13. Način rada
   14. Sekcija poverenja
   15. Česta pitanja
   16. Kontakt i forma
   17. Footer
   18. Kolačići
   19. Pravne stranice
   20. Animacije reveal
   ========================================================================== */

/* ----------------------------------------------------------- 1. TOKENI */
:root{
  /* Paleta — topli papir, duboki ugalj, prigušena maslina i bronza */
  --olive:      #4E5B45;
  --olive-deep: #3E4938;
  --charcoal:   #171918;
  --ivory:      #FBF9F4;   /* svetla površina */
  --cream:      #F5F1E8;   /* topla papirna podloga */
  --stone:      #D9D2C5;   /* linija / mirni ton */
  --walnut:     #6E5130;   /* bronza za tekst (dovoljan kontrast) */
  --brass:      #9A744B;   /* prigušena bronza — akcenat */
  --brass-light:#C5A77D;   /* svetlija bronza na tamnoj podlozi */
  --brass-pale: #E4D3B4;   /* bronza za sitan tekst na maslinastoj podlozi */

  /* Semantika */
  --bg:            var(--ivory);
  --text:          #1F211E;
  --text-soft:     #575A51;
  --text-invert:   var(--ivory);
  --line:          #D9D2C5;
  /* Poluprovidna linija za mreže sa razmakom od 1px (mirnija pre pojavljivanja). */
  --line-fill:     rgba(110, 81, 48, .2);
  --line-strong:   #C3BAA8;
  --line-light:    rgba(251, 249, 244, .18);

  /* Tipografija */
  --serif: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Potpis u sekciji „O advokatu" je SVG oznaka — rukopisni font se ne učitava. */

  /* Portret u sekciji „O advokatu".
     Fotografija je pejzažna (široki kadar kancelarije) — ako jednog dana
     zamenite uspravnim portretom, stavite --portrait-ratio: 4 / 5.
     --portrait-focus pomera težište kadra: prva vrednost levo/desno,
     druga gore/dole. */
  --portrait-ratio: 4 / 3;
  --portrait-focus: 52% 42%;

  /* Prostor */
  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* Detalji */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --shadow-soft: 0 1px 2px rgba(23,25,24,.04), 0 12px 32px rgba(23,25,24,.06);
  --shadow-lift: 0 2px 4px rgba(23,25,24,.05), 0 22px 48px rgba(23,25,24,.10);
  --shadow-deep: 0 3px 8px rgba(23,25,24,.05), 0 26px 52px rgba(23,25,24,.13);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-editorial: cubic-bezier(.22,1,.36,1);
  --dur: .7s;

  /* Tekstura papira */
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ------------------------------------------------- 2. RESET I OSNOVE */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  font-weight:300;
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

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

a{ color:inherit; }

button{ font:inherit; color:inherit; }

::selection{ background:var(--brass); color:var(--charcoal); }

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.skip-link{
  position:fixed; top:.75rem; left:.75rem; z-index:200;
  transform:translateY(-200%);
  background:var(--olive); color:var(--ivory);
  padding:.75rem 1.25rem; border-radius:var(--r-md);
  font-size:.875rem; text-decoration:none;
  transition:transform .3s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

/* --------------------------------------------------- 3. TIPOGRAFIJA */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0;
  text-wrap:balance;
}

.h2{
  font-size:clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  color:var(--charcoal);
}
.h2--display{
  font-size:clamp(2.6rem, 1.6rem + 4.4vw, 5.25rem);
  letter-spacing:-.02em;
}
.h2--light{ color:var(--ivory); }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.lead{
  font-size:clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height:1.8;
  color:var(--text-soft);
}

.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--walnut);
  margin:0 0 1.25rem;
  display:flex;
  align-items:center;
  gap:.85rem;
}
.eyebrow::before{
  content:"";
  width:2.5rem; height:1px;
  background:var(--brass);
  flex:none;
}
.eyebrow--light{ color:var(--stone); }

.note{
  font-size:.8125rem;
  color:var(--text-soft);
  letter-spacing:.01em;
}

.accent{ color:var(--brass); font-style:italic; }

/* ------------------------------------------------------- 4. LAYOUT */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  position:relative;
  padding-block:var(--section-y);
}

.section--paper{
  background:var(--cream);
  position:relative;
  isolation:isolate;
}
.section--paper::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--paper);
  opacity:.05;
  pointer-events:none;
  z-index:-1;
}

.section__head{ max-width:56ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section__head--center{
  margin-inline:auto;
  text-align:center;
}
.section__head--center .eyebrow{ justify-content:center; }

/* --------------------------------------------- 5. DUGMAD I LINKOVI */
.btn{
  --btn-bg:var(--olive);
  --btn-fg:var(--ivory);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:1rem 2rem;
  border:1px solid transparent;
  border-radius:var(--r-md);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:background-color .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), transform .45s var(--ease),
             box-shadow .45s var(--ease);
}
.btn::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:100%;
  background:var(--charcoal);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
  z-index:-1;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.btn:hover::after{ transform:translateY(0); }
.btn:active{ transform:translateY(0) scale(.99); }

/* Dugme sa strelicom */
.btn--arrow{ gap:.8rem; }
.btn--arrow::before{
  content:"\2192";
  order:2;
  font-size:1.05em;
  line-height:1;
  transition:transform .35s var(--ease-editorial), margin-left .35s var(--ease-editorial);
}
.btn--arrow:hover::before,
.btn--arrow:focus-visible::before{ transform:translateX(4px); margin-left:.2rem; }

.btn--solid{ background:var(--olive); color:var(--ivory); }
.btn--solid:hover{ color:var(--ivory); }

.btn--outline{
  background:transparent;
  color:var(--olive);
  border-color:var(--line-strong);
}
.btn--outline:hover{ color:var(--ivory); border-color:var(--charcoal); }

.btn--block{ width:100%; }
.btn--sm{ padding:.75rem 1.4rem; font-size:.72rem; }

.link-arrow{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:inherit;
  padding-block:.35rem;
}
.link-arrow::before{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  opacity:.35;
  transform-origin:right;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.link-arrow::after{
  content:"\2192";
  transition:transform .45s var(--ease);
}
.link-arrow:hover::before{ transform:scaleX(0); opacity:1; }
.link-arrow:hover::after{ transform:translateX(5px); }

.link-arrow--back{ flex-direction:row-reverse; }
.link-arrow--back::after{ content:"\2190"; }
.link-arrow--back:hover::after{ transform:translateX(-5px); }

/* ---------------------------------------------------- 6. MONOGRAM */
.brand__mark{ display:block; width:44px; height:44px; flex:none; }
.brand__mark svg{ width:100%; height:100%; overflow:visible; }

.mono-ring-outer{ fill:none; stroke:var(--brass); stroke-width:1.4; opacity:.9; }
.mono-ring-inner{ fill:none; stroke:currentColor; stroke-width:.7; opacity:.35; }
.mono-laurel{ fill:none; stroke:var(--brass); stroke-width:1.5; stroke-linecap:round; opacity:.75; }
.mono-letters{
  font-family:var(--serif);
  font-size:30px;
  font-weight:500;
  letter-spacing:.5px;
  text-anchor:middle;
  fill:currentColor;
}

/* ----------------------------------------- 7. HEADER I NAVIGACIJA */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  color:var(--charcoal);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .55s var(--ease), color .55s var(--ease),
             border-color .55s var(--ease), box-shadow .55s var(--ease),
             transform .5s var(--ease);
}

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:88px;
  padding-block:.75rem;
}

/* Stranice bez hero sekcije: header je odmah svetao (bez treperenja). */
.site-header:not([data-transparent]),
.site-header.is-solid{
  background:rgba(251,249,244,.92);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  color:var(--charcoal);
  border-bottom-color:var(--line);
  box-shadow:0 1px 24px rgba(36,37,34,.06);
}
.site-header:not([data-transparent]) .site-header__inner,
.site-header.is-solid .site-header__inner{ min-height:74px; }

.brand{
  display:flex;
  align-items:center;
  gap:.9rem;
  text-decoration:none;
  color:inherit;
}
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{
  font-family:var(--serif);
  font-size:1.3rem;
  letter-spacing:.01em;
}
.brand__role{
  font-size:.62rem;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  opacity:.72;
  margin-top:.2rem;
}

.nav{ display:flex; align-items:center; gap:clamp(1.25rem,3vw,2.75rem); }
.nav__list{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.2vw,2.15rem);
  list-style:none;
  margin:0; padding:0;
}
.nav__list a{
  position:relative;
  display:inline-block;
  padding:.35rem 0;
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.1em;
  text-decoration:none;
  white-space:nowrap;
  transition:color .4s var(--ease);
}
.nav__list a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav__list a:hover::after,
.nav__list a.is-current::after{ transform:scaleX(1); }
.nav__list a.is-current{ color:var(--walnut); }

/* Tanka linija koja prati aktivnu sekciju (JS je pozicionira). */
.nav__indicator{
  position:absolute;
  left:0; bottom:0;
  height:1px;
  width:0;
  background:var(--brass);
  opacity:0;
  transform:translateX(0);
  transition:transform .55s var(--ease-editorial), width .55s var(--ease-editorial),
             opacity .4s var(--ease);
  pointer-events:none;
}
.nav__indicator.is-on{ opacity:1; }
/* Kada JS preuzme indikator, pojedinačne linije se gase. */
.has-nav-indicator .nav__list a::after{ display:none; }

.nav__cta{ padding:.85rem 1.5rem; font-size:.72rem; }
.site-header[data-transparent]:not(.is-solid) .nav__cta{
  background:transparent;
  color:var(--charcoal);
  border-color:var(--line-strong);
}
.site-header[data-transparent]:not(.is-solid) .nav__cta:hover{
  color:var(--ivory);
  border-color:var(--charcoal);
}

.nav-toggle{
  display:none;
  width:46px; height:46px;
  align-items:center; justify-content:center;
  background:none;
  border:1px solid currentColor;
  border-radius:var(--r-md);
  opacity:.75;
  cursor:pointer;
  transition:opacity .35s var(--ease), border-color .35s var(--ease);
}
.nav-toggle:hover{ opacity:1; }
.nav-toggle__bars{ display:block; width:18px; }
.nav-toggle__bars i{
  display:block; height:1px; background:currentColor;
  margin:4px 0;
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ------------------------------------------------------- 8. HERO */
.hero{
  position:relative;
  isolation:isolate;
  padding-top:clamp(122px, 13vw, 172px);
  padding-bottom:clamp(2.5rem, 5vw, 4rem);
  background:var(--ivory);
  color:var(--text);
  overflow:hidden;
}

.hero__ground{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(88% 68% at 84% 10%, rgba(154,116,75,.13) 0%, rgba(154,116,75,0) 62%),
    radial-gradient(68% 58% at 4% 94%, rgba(78,91,69,.08) 0%, rgba(78,91,69,0) 58%),
    var(--ivory);
}
.hero__ground::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--paper);
  opacity:.045;
}

.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(2rem, 5vw, 5rem);
  align-items:center;
}

/* --- Leva strana --- */
.hero__copy{ position:relative; z-index:2; }

.hero__label{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--walnut);
}
.hero__label-line{
  width:2.75rem; height:1px;
  background:var(--brass);
  flex:none;
  transform-origin:left;
}

.hero__title{
  font-size:clamp(2.5rem, 1.35rem + 3.9vw, 4.75rem);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.022em;
  color:var(--charcoal);
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  max-width:14ch;
}
.hero__line{
  display:block;
  overflow:hidden;
  padding-bottom:.04em;
}
.hero__line > span{ display:block; }

.hero__lead{
  max-width:46ch;
  font-size:clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  font-weight:300;
  line-height:1.8;
  color:var(--text-soft);
  margin-bottom:clamp(2rem,4vw,2.75rem);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(1.25rem,3vw,2.25rem);
}
.hero__actions .link-arrow{ color:var(--walnut); }

/* --- Desna strana: portret i katastarski crtež --- */
.hero__figure{
  position:relative;
  justify-self:end;
  width:100%;
  max-width:470px;
}

.cadastre{
  position:absolute;
  top:-14%; left:-44%;
  width:152%; height:130%;
  color:var(--brass);
  opacity:.6;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, #000 26%, #000 100%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, #000 26%, #000 100%);
}
.cadastre__grid{ opacity:.2; }
.cadastre__plot{ opacity:.66; }
.cadastre__dots{ opacity:.5; }
.cadastre__dims{ opacity:.42; }
.cadastre__north{ opacity:.4; }
.cadastre text{
  font-family:var(--sans);
  font-size:13px;
  font-weight:400;
  letter-spacing:.14em;
  opacity:.5;
}
.cadastre__north text{ font-size:12px; letter-spacing:.06em; }

.hero__portrait{
  position:relative;
  margin:0;
}
.hero__frame{
  position:absolute;
  top:clamp(20px,2.6vw,34px);
  left:clamp(20px,2.6vw,34px);
  width:100%; height:100%;
  overflow:visible;
}
.hero__frame rect{
  fill:none;
  stroke:var(--brass);
  stroke-width:1;
  opacity:.7;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}

.hero__photo-mask{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--r-sm);
  background:var(--cream);
  box-shadow:var(--shadow-deep);
  aspect-ratio:4 / 5;
}
.hero__photo-mask picture{ display:block; width:100%; height:100%; }
.hero__photo{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 40%;
  transform:scale(var(--zoom, 1));
}

/* --- Informativna traka --- */
.hero__panel{
  margin-top:clamp(2.5rem, 5vw, 4rem);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(178px, 1fr));
  gap:1px;
  background:var(--line-fill);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.hero__panel-item{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:1.05rem clamp(.9rem,1.6vw,1.35rem);
  background:var(--ivory);
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-soft);
  text-decoration:none;
  transition:background-color .45s var(--ease), color .45s var(--ease);
}
.hero__panel-item svg{
  width:17px; height:17px; flex:none;
  fill:none; stroke:var(--brass);
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .45s var(--ease);
}
.hero__panel-item--link{ color:var(--charcoal); }
.hero__panel-item--link:hover{ background:var(--cream); color:var(--walnut); }
.hero__panel-item--link:hover svg{ stroke:var(--walnut); }

/* --- Uvodna sekvenca (čist CSS: radi i bez JS-a) --- */
@keyframes heroRise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
@keyframes heroLine{
  from{ opacity:0; transform:translateY(104%); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes heroMask{
  from{ clip-path:inset(0 0 100% 0); }
  to{ clip-path:inset(0 0 0 0); }
}
@keyframes heroPhotoScale{
  from{ transform:scale(1.035); }
  to{ transform:scale(1); }
}
@keyframes heroDraw{ to{ stroke-dashoffset:0; } }
@keyframes heroFade{ from{ opacity:0; } }
@keyframes heroRule{ from{ transform:scaleX(0); } }

.hero__label{ animation:heroRise 640ms var(--ease-editorial) 120ms both; }
.hero__label-line{ animation:heroRule 620ms var(--ease-editorial) 220ms both; }
.hero__line > span{
  animation:heroLine 820ms var(--ease-editorial) both;
  animation-delay:calc(200ms + var(--i, 0) * 85ms);
}
.hero__frame rect{ animation:heroDraw 680ms var(--ease-editorial) 140ms both; }
.hero__photo-mask{ animation:heroMask 900ms var(--ease-editorial) 320ms both; }
.hero__photo-mask picture{ animation:heroPhotoScale 1400ms var(--ease-editorial) 320ms both; }
.hero .cadastre{ animation:heroFade 900ms var(--ease) 360ms both; }
.cadastre__plot path{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:heroDraw 1000ms var(--ease) both;
}
.cadastre__plot path:nth-child(1){ animation-delay:420ms; }
.cadastre__plot path:nth-child(2){ animation-delay:560ms; }
.cadastre__plot path:nth-child(3){ animation-delay:660ms; }
.cadastre__plot path:nth-child(4){ animation-delay:760ms; }
.cadastre__plot path:nth-child(5){ animation-delay:840ms; }
.cadastre__dims path:first-child,
.cadastre__dims path:nth-child(3){
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:heroDraw 800ms var(--ease) 900ms both;
}
.cadastre__dots,
.cadastre__labels,
.cadastre__north{ animation:heroFade 700ms var(--ease) 1000ms both; }
.hero__lead{ animation:heroRise 640ms var(--ease-editorial) 720ms both; }
.hero__actions{ animation:heroRise 640ms var(--ease-editorial) 840ms both; }
.hero__panel{ animation:heroRise 640ms var(--ease-editorial) 960ms both; }

/* ------------------------------------------------------- 9. UVOD */
.intro__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
.intro__lead .h2{ max-width:16ch; }

.values{
  list-style:none;
  margin:clamp(2.5rem,5vw,3.5rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line-fill);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.value{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:1.4rem 1.5rem;
  background:var(--cream);
  font-family:var(--serif);
  font-size:1.25rem;
  color:var(--charcoal);
  transition:background-color .5s var(--ease);
}
.value:hover{ background:var(--ivory); }
.value__icon{
  width:24px; height:24px; flex:none;
  fill:none; stroke:var(--brass);
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
}

/* ------------------------------------------ 10. GLAVNA OBLAST RADA */
.focus{
  background:var(--ivory);
  border-top:1px solid var(--line);
}
.focus__head{
  max-width:62ch;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.focus__sub{
  font-family:var(--serif);
  font-size:clamp(1.25rem,1rem + 1vw,1.75rem);
  font-style:italic;
  color:var(--walnut);
  margin:1.25rem 0 1.75rem;
}
.focus__text{
  max-width:58ch;
  color:var(--text-soft);
  line-height:1.85;
}

.topics{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line-fill);
  border-block:1px solid var(--line);
}
.topic{
  position:relative;
  background:var(--ivory);
  padding:clamp(1.75rem,2.5vw,2.25rem) clamp(1.25rem,2vw,1.75rem) clamp(2rem,3vw,2.5rem);
  transition:background-color .55s var(--ease);
}
.topic::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:2px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--ease);
}
.topic:hover{ background:var(--cream); }
.topic:hover::before{ transform:scaleX(1); }
.topic__num{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-family:var(--serif);
  font-size:.9rem;
  letter-spacing:.2em;
  color:var(--brass);
  margin-bottom:1.1rem;
}
.topic__num::after{
  content:"";
  width:1.75rem; height:1px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s var(--ease-editorial) .18s;
}
.topic.is-in .topic__num::after{ transform:scaleX(1); }
.topic h3{
  font-size:1.4rem;
  color:var(--charcoal);
  margin-bottom:.65rem;
  min-height:2.6em;
}
.topic p{
  font-size:.9rem;
  line-height:1.7;
  color:var(--text-soft);
}

.focus__cta{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.5rem 2.5rem;
}
.focus__cta .note{ max-width:36ch; margin:0; }

/* ------------------------------------------- 11. OSTALE OBLASTI */
.areas__grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);
}
.areas__grid > .card:nth-child(1),
.areas__grid > .card:nth-child(2),
.areas__grid > .card:nth-child(3){ grid-column:span 2; }
.areas__grid > .card:nth-child(4){ grid-column:span 3; }
.areas__grid > .card:nth-child(5){ grid-column:span 3; }

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:clamp(1.75rem,3vw,2.5rem);
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:transform 350ms var(--ease-editorial), box-shadow 350ms ease,
             border-color 350ms ease;
}
.card::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  border:1px solid var(--brass);
  opacity:0;
  transition:opacity 350ms ease;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
  border-color:transparent;
}
.card:hover::after{ opacity:.5; }

.card__icon{
  width:34px; height:34px;
  fill:none; stroke:var(--walnut);
  stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke 350ms ease, transform 350ms var(--ease-editorial);
}
.card:hover .card__icon{ stroke:var(--brass); transform:translateY(-2px); }

/* Bez oslanjanja na hover na dodirnim uređajima */
@media (hover: none){
  .card:hover{ transform:none; box-shadow:none; border-color:var(--line); }
  .card:hover::after{ opacity:0; }
  .card:hover .card__icon{ transform:none; }
}
.card__title{
  font-size:clamp(1.5rem,1.2rem + .7vw,1.875rem);
  color:var(--charcoal);
}
.card p{
  font-size:.94rem;
  line-height:1.8;
  color:var(--text-soft);
  margin:0;
}
.card--quiet{
  background:transparent;
  border-style:dashed;
}

/* --------------------------------------------- 12. O ADVOKATU */
.about{ background:var(--ivory); border-top:1px solid var(--line); }
.about__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}

.about__media{ position:relative; }
.portrait{
  position:relative;
  z-index:1;
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--cream);
  box-shadow:var(--shadow-lift);
}
/* Okvir zadržava odnos stranica pre učitavanja slike — bez skoka u layoutu. */
.portrait__media{
  position:relative;
  overflow:hidden;
  aspect-ratio:var(--portrait-ratio);
  background:var(--cream);
}

.portrait__picture{ display:contents; }

.portrait__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--portrait-focus);
  display:block;
  transform:scale(var(--zoom, 1));
}
.portrait__caption{
  padding:1rem 1.25rem;
  background:var(--charcoal);
  color:var(--stone);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.portrait__frame{
  position:absolute;
  inset:1.75rem -1.75rem -1.75rem 1.75rem;
  border:1px solid var(--brass);
  border-radius:var(--r-lg);
  opacity:.45;
  z-index:0;
}

.about__text > p{
  max-width:52ch;
  color:var(--text-soft);
  line-height:1.85;
}
.about__text .h2{ margin-bottom:1.75rem; }

.signature{
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:1.75rem;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
  max-width:26rem;
}
/* Potpis — ime ispisano kao vektorska putanja (font se ne učitava na sajtu).
   Slova su iz Kaushan Script (SIL Open Font License), pretvorena u konture.
   Nije potpis sa dokumenta i ne može se koristiti kao takav. */
.signature__mark{
  display:block;
  width:min(322px, 100%);
  height:auto;
  color:#765632;                      /* bronza iz palete sajta */
  overflow:visible;
}
.signature__mark .sig-name{ fill:currentColor; }
.signature__mark .sig-tail{
  fill:none;
  stroke:currentColor;
  stroke-width:3.3;
  stroke-linecap:round;
  opacity:.78;
}

/* Otkrivanje: ukošena maska klizi s leva na desno — utisak ispisivanja. */
.js .signature__mark .sig-wipe{
  transform-box:fill-box;
  transform-origin:0% 50%;
  transform:skewX(-9deg) scaleX(0);
}
.js .signature.is-in .sig-wipe{
  transform:skewX(-9deg) scaleX(1);
  transition:transform 980ms cubic-bezier(.36,0,.26,1) 60ms;
}
.js .signature__mark .sig-tail{ stroke-dasharray:1; stroke-dashoffset:1; }
.js .signature.is-in .sig-tail{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 260ms cubic-bezier(.22,1,.36,1) 1020ms;
}
.signature__role{
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.js .signature__role{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .26s ease, transform .26s cubic-bezier(.22,1,.36,1);
}
.js .signature.is-in .signature__role{
  opacity:1;
  transform:none;
  transition-delay:1180ms;
}

/* --------------------------------------------- 13. NAČIN RADA */
.timeline{ position:relative; }

.timeline__rail{
  position:absolute;
  left:0; right:0; top:9px;
  height:1px;
  background:var(--line-strong);
  overflow:hidden;
}
.timeline__fill{
  display:block;
  width:100%; height:100%;
  background:var(--brass);
  transform:scaleX(var(--tp, 0));
  transform-origin:left;
  transition:transform .45s var(--ease);
}

.steps{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
  position:relative;
}
.step{
  position:relative;
  padding-top:3rem;
  transition:transform .6s var(--ease-editorial);
}
.step__dot{
  position:absolute;
  top:3px; left:0;
  width:13px; height:13px;
  border-radius:50%;
  background:var(--cream);
  border:1px solid var(--line-strong);
  transition:border-color .5s var(--ease), transform .5s var(--ease-editorial);
}
.step__dot::after{
  content:"";
  position:absolute; inset:3px;
  border-radius:50%;
  background:var(--brass);
  opacity:0;
  transform:scale(.4);
  transition:opacity .45s var(--ease), transform .45s var(--ease-editorial);
}
.step.is-reached .step__dot{ border-color:var(--brass); }
.step.is-reached .step__dot::after{ opacity:1; transform:scale(1); }
.step.is-active .step__dot{ transform:scale(1.2); }
.step:hover .step__dot{ transform:scale(1.2); }

.step__num{
  display:block;
  font-family:var(--serif);
  font-size:.85rem;
  letter-spacing:.22em;
  color:var(--brass);
  margin-bottom:.75rem;
}
.step__title{
  font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);
  color:var(--charcoal);
  margin-bottom:.6rem;
  transition:color .5s var(--ease);
}
.step p{
  font-size:.94rem;
  line-height:1.8;
  color:var(--text-soft);
  margin:0;
  max-width:32ch;
  transition:color .5s var(--ease);
}
.step:not(.is-reached) .step__title{ color:#3c3e39; }
.step.is-active p{ color:var(--text); }

.process__sub{
  margin:1.5rem auto 0;
  max-width:48ch;
  color:var(--text-soft);
}

/* --------------------------------------- 14. SEKCIJA POVERENJA */
.trust{
  background:var(--olive);
  color:var(--ivory);
  position:relative;
  isolation:isolate;
}
.trust::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background-image:var(--paper);
  opacity:.06;
  pointer-events:none;
}
.trust__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.trust__lead .h2{ max-width:15ch; }
.trust__text{
  margin-top:1.75rem;
  max-width:46ch;
  color:rgba(247,244,236,.78);
  line-height:1.85;
}

.principles{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line-light);
  border:1px solid var(--line-light);
  border-radius:var(--r-md);
  overflow:hidden;
}
.principle{
  background:var(--olive);
  padding:clamp(1.5rem,2.5vw,2rem);
  transition:background-color .55s var(--ease);
}
.principle:hover{ background:var(--olive-deep); }
.principle__index{
  display:block;
  font-family:var(--serif);
  font-size:.95rem;
  letter-spacing:.2em;
  color:var(--brass-pale);
  margin-bottom:.85rem;
}
.principle h3{
  font-size:1.35rem;
  color:var(--ivory);
  margin-bottom:.4rem;
}
.principle p{
  font-size:.88rem;
  line-height:1.7;
  color:rgba(247,244,236,.66);
  margin:0;
}

/* --------------------------------------------- 15. ČESTA PITANJA */
.faq__grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.faq__head{ position:sticky; top:120px; }
.faq__head .h2{ max-width:14ch; }
.faq__note{
  margin-top:1.5rem;
  max-width:38ch;
  font-size:.9rem;
  color:var(--text-soft);
}

.accordion{ border-top:1px solid var(--line); }
.acc{
  border-bottom:1px solid var(--line);
  transition:border-color .35s ease;
}
.acc.is-open{ border-bottom-color:var(--brass); }
.acc__h{ margin:0; font-family:inherit; }
.acc__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.6rem 0;
  background:none;
  border:0;
  text-align:left;
  cursor:pointer;
  font-family:var(--serif);
  font-size:clamp(1.15rem,1rem + .5vw,1.5rem);
  line-height:1.35;
  color:var(--charcoal);
  transition:color .4s var(--ease);
}
.acc__btn:hover{ color:var(--walnut); }
.acc.is-open .acc__btn{ color:var(--walnut); }

.acc__sign{
  position:relative;
  flex:none;
  width:20px; height:20px;
}
.acc__sign::before,
.acc__sign::after{
  content:"";
  position:absolute;
  top:50%; left:0;
  width:20px; height:1px;
  background:var(--brass);
  transition:transform .35s var(--ease-editorial), opacity .35s ease;
}
.acc__sign::after{ transform:rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign::after{ transform:rotate(0); }

/* Bez JS-a paneli ostaju otvoreni i čitljivi. */
.acc__panel{
  overflow:hidden;
  transition:height .32s var(--ease-editorial);
}
.js .acc__panel{ height:0; }
.acc__panel > p{
  padding:0 3rem 1.75rem 0;
  margin:0;
  max-width:62ch;
  font-size:.96rem;
  line-height:1.85;
  color:var(--text-soft);
}
.js .acc__panel > p{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease .05s, transform .35s var(--ease-editorial) .05s;
}
.js .acc.is-open .acc__panel > p{ opacity:1; transform:none; }
.acc__panel a{ color:var(--walnut); text-underline-offset:3px; }

/* ------------------------------------------ 16. KONTAKT I FORMA */
.contact{
  background:var(--ivory);
  border-top:1px solid var(--line);
}
.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.contact__intro{
  max-width:42ch;
  margin-top:1.5rem;
  color:var(--text-soft);
}

.form{ margin-top:clamp(2rem,4vw,3rem); }
.field{ margin-bottom:1.5rem; }
.field-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
}
.field label{
  display:block;
  margin-bottom:.55rem;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--walnut);
}
.req{ color:var(--brass); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%;
  padding:.95rem 1.1rem;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  font-family:var(--sans);
  font-size:.98rem;
  font-weight:300;
  color:var(--text);
  transition:border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.field textarea{ resize:vertical; min-height:9rem; line-height:1.7; }
.field ::placeholder{ color:#9b9587; opacity:1; }

.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:var(--line-strong); }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  background:var(--ivory);
  border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(182,154,98,.16);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{ outline:none; }

.select-wrap{ position:relative; }
.select-wrap select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:3rem;
  cursor:pointer;
}
.select-wrap__icon{
  position:absolute;
  right:1rem; top:50%;
  transform:translateY(-50%);
  width:20px; height:20px;
  fill:none; stroke:var(--walnut);
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  pointer-events:none;
}

.field--check{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.85rem;
  align-items:start;
}
.field--check input{
  appearance:none;
  -webkit-appearance:none;
  width:20px; height:20px;
  margin-top:.2rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--cream);
  cursor:pointer;
  transition:background-color .35s var(--ease), border-color .35s var(--ease);
}
.field--check input:checked{
  background:var(--olive);
  border-color:var(--olive);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F4EC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size:14px;
  background-position:center;
  background-repeat:no-repeat;
}
.field--check label{
  margin:0;
  font-size:.85rem;
  font-weight:300;
  letter-spacing:0;
  text-transform:none;
  line-height:1.65;
  color:var(--text-soft);
}
.field--check label a{ color:var(--walnut); }
.field--check .field__err{ grid-column:1 / -1; }

.field__err{
  margin:.5rem 0 0;
  font-size:.8rem;
  color:#8d3b2c;
  letter-spacing:.01em;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:#b45a45;
  background:#fbf2ee;
}

.hp{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.form .btn{ margin-top:.5rem; }

.form__privacy{
  margin-top:1.5rem;
  font-size:.78rem;
  line-height:1.7;
  color:var(--text-soft);
  padding-left:1.1rem;
  border-left:1px solid var(--brass);
}

.form__status{
  margin-top:1.5rem;
  padding:1.15rem 1.35rem;
  border-radius:var(--r-md);
  font-size:.92rem;
  border:1px solid var(--line);
}
.form__status.is-ok{
  background:rgba(63,73,56,.07);
  border-color:rgba(63,73,56,.3);
  color:var(--olive);
}
.form__status.is-error{
  background:#fbf2ee;
  border-color:#d8b3a7;
  color:#8d3b2c;
}

/* Desna kolona */
.info-card{
  padding:clamp(1.75rem,3vw,2.5rem);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.info-card__title{
  font-size:1.65rem;
  color:var(--charcoal);
  padding-bottom:1.25rem;
  margin-bottom:1.25rem;
  border-bottom:1px solid var(--line);
}
.info-list{ list-style:none; margin:0 0 2rem; padding:0; }
.info-list li{
  display:flex;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid var(--line);
}
/* Duga e-mail adresa se prelama umesto da izađe iz kartice na uskom ekranu. */
.info-list li > div{ min-width:0; }
.info-list a{ overflow-wrap:anywhere; }
.info-list li:last-child{ border-bottom:0; }
.info-list__icon{
  width:22px; height:22px; flex:none;
  margin-top:.35rem;
  fill:none; stroke:var(--brass);
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
}
.info-list__label{
  display:block;
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-soft);
  margin-bottom:.2rem;
}
.info-list a{
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--charcoal);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.info-list a:hover{ color:var(--walnut); border-bottom-color:var(--brass); }

.map{
  margin:1.25rem 0 0;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--cream);
}
.map iframe{
  width:100%;
  height:290px;
  border:0;
  display:block;
  filter:grayscale(.35) sepia(.12) contrast(.96);
  transition:filter .7s var(--ease);
}
.map:hover iframe{ filter:grayscale(.1) sepia(.04) contrast(1); }
.map figcaption{
  padding:.9rem 1.25rem;
  border-top:1px solid var(--line);
  font-size:.78rem;
  letter-spacing:.06em;
}
.map figcaption a{ color:var(--walnut); text-decoration:none; }
.map figcaption a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ------------------------------------------------------ 17. FOOTER */
.site-footer{
  background:var(--charcoal);
  color:var(--stone);
  padding-block:clamp(3.5rem,7vw,5.5rem) 2rem;
  font-size:.92rem;
}
.footer__top{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,5vw,3.5rem);
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid var(--line-light);
}
.brand__mark--footer{ width:54px; height:54px; color:var(--ivory); margin-bottom:1.25rem; }
.footer__name{
  font-family:var(--serif);
  font-size:1.6rem;
  color:var(--ivory);
  margin-bottom:.6rem;
}
.footer__tag{
  max-width:32ch;
  color:rgba(212,200,181,.72);
  font-size:.88rem;
  line-height:1.75;
}
.footer__h{
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass-light);
  margin:0 0 1.25rem;
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:.7rem; line-height:1.6; }
.site-footer a{
  text-decoration:none;
  color:rgba(212,200,181,.85);
  transition:color .4s var(--ease);
}
.site-footer a:hover{ color:var(--brass-light); }

.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.75rem 2rem;
  padding-top:1.75rem;
  font-size:.78rem;
  color:rgba(212,200,181,.6);
}
.footer__bottom p{ margin:0; }
.footer__disclaimer{ max-width:48ch; }

/* --------------------------------------------------- 18. KOLAČIĆI */
.cookie{
  position:fixed;
  left:50%;
  bottom:1.25rem;
  transform:translate(-50%, 130%);
  z-index:120;
  width:min(760px, calc(100% - 2rem));
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);
  transition:transform .8s var(--ease), opacity .8s var(--ease);
  opacity:0;
}
.cookie.is-visible{ transform:translate(-50%, 0); opacity:1; }
.cookie__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  padding:1.25rem 1.5rem;
}
.cookie__title{
  font-family:var(--serif);
  font-size:1.25rem;
  color:var(--charcoal);
  margin:0 0 .2rem;
}
.cookie__text{
  margin:0;
  font-size:.85rem;
  line-height:1.65;
  color:var(--text-soft);
  max-width:52ch;
}
.cookie__text a{ color:var(--walnut); }

/* -------------------------------------------- 19. PRAVNE STRANICE */
.legal{
  padding-block:clamp(9rem,14vw,12rem) var(--section-y);
  background:var(--ivory);
}
.legal__inner{ max-width:70ch; }
.legal h1{
  font-size:clamp(2.25rem,1.6rem + 2.6vw,3.5rem);
  color:var(--charcoal);
  margin-bottom:1.5rem;
}
.legal h2{
  font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem);
  color:var(--charcoal);
  margin:2.75rem 0 .9rem;
}
.legal p,.legal li{ color:var(--text-soft); line-height:1.85; }
.legal ul{ padding-left:1.25rem; margin:0 0 1.15em; }
.legal li{ margin-bottom:.5rem; }
.legal a{ color:var(--walnut); text-underline-offset:3px; }
.legal strong{ font-weight:500; color:var(--charcoal); }
.legal code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.86em;
  padding:.15em .45em;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.legal__meta{
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.82rem;
}
.legal__back{ margin-bottom:2.5rem; }

/* -------------------------------------------------- 20. ANIMACIJE */
/* Bez JS-a sadržaj je odmah vidljiv. */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease-editorial), transform .7s var(--ease-editorial);
  transition-delay:calc(var(--d, 0) * 90ms);
  will-change:opacity, transform;
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ================================================== RESPONSIVE ===== */

@media (max-width:1100px){
  .topics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topic h3{ min-height:0; }
  .areas__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .areas__grid > .card:nth-child(n){ grid-column:span 1; }
  .areas__grid > .card:nth-child(5){ grid-column:span 2; }
  .footer__top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:980px){
  .intro__grid,
  .about__grid,
  .trust__grid,
  .faq__grid,
  .contact__grid{ grid-template-columns:minmax(0,1fr); }
  .about__grid{ gap:clamp(3rem,8vw,4rem); }
  .about__media{ max-width:580px; }
  .portrait__frame{ inset:1.25rem -1.25rem -1.25rem 1.25rem; }
  .faq__head{ position:static; }
}

/* ------- Mobilna navigacija ------- */
@media (max-width:900px){
  /* Logo i dugme menija ostaju iznad punog preklopa. */
  .brand,
  .nav-toggle{ position:relative; z-index:2; }
  .nav-toggle{ display:inline-flex; }

  .nav{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:2.5rem;
    padding:6rem var(--gutter) 3rem;
    background:var(--olive);
    color:var(--ivory);
    opacity:0;
    visibility:hidden;
    transform:translateY(-1.25rem);
    transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
    overflow-y:auto;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }

  .nav__list{
    flex-direction:column;
    align-items:flex-start;
    gap:.35rem;
    width:100%;
  }
  .nav__list li{ width:100%; border-bottom:1px solid var(--line-light); }
  .nav__list a{
    display:block;
    width:100%;
    padding:1.15rem 0;
    font-family:var(--serif);
    font-size:2rem;
    letter-spacing:0;
    color:var(--ivory);
  }
  .nav__list a::after{ display:none; }
  .nav__list a.is-current{ color:var(--brass-pale); }

  .nav__cta{
    background:var(--brass-light);
    color:var(--charcoal);
    border-color:var(--brass-light);
    padding:1rem 2rem;
    font-size:.75rem;
  }
  .site-header[data-transparent]:not(.is-solid) .nav__cta{
    background:var(--brass-light);
    color:var(--charcoal);
    border-color:var(--brass-light);
  }
  .nav__cta::after{ background:var(--ivory); }
  .nav__cta:hover{ color:var(--charcoal); }

  /* header uvek čitljiv dok je meni otvoren */
  .site-header.is-nav-open{ color:var(--ivory); background:transparent; box-shadow:none; border-bottom-color:transparent; }
  .site-header.is-nav-open .brand__mark{ color:var(--ivory); }
}

@media (max-width:760px){
  html{ scroll-padding-top:80px; }

  .site-header__inner{ min-height:72px; }
  .brand__mark{ width:38px; height:38px; }
  .brand__name{ font-size:1.15rem; }

  .portrait__frame{ inset:.9rem -.75rem -.75rem .9rem; }
  .values{ grid-template-columns:minmax(0,1fr); }
  .topics{ grid-template-columns:minmax(0,1fr); }
  .areas__grid{ grid-template-columns:minmax(0,1fr); }
  .areas__grid > .card:nth-child(5){ grid-column:span 1; }
  .principles{ grid-template-columns:minmax(0,1fr); }
  .field-row{ grid-template-columns:minmax(0,1fr); gap:0; }
  .acc__panel > p{ padding-right:1rem; }
  .focus__cta{ flex-direction:column; align-items:flex-start; }
  .focus__cta .btn{ width:100%; }

  .footer__top{ grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .cookie__inner{ flex-direction:column; align-items:flex-start; }
  .cookie .btn{ width:100%; }
}

@media (max-width:420px){
  .brand__role{ display:none; }
}

/* ------- Preference korisnika ------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media (prefers-contrast: more){
  :root{
    --text-soft:#3B3E37;
    --line:#BCB2A0;
    --line-fill:rgba(110,81,48,.34);
    --line-strong:#A2947E;
  }
}

/* ------- Štampa ------- */
@media print{
  .site-header,.nav,.nav-toggle,.cookie,.map,.form{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:1.5rem; }
  .reveal{ opacity:1; transform:none; }
}

/* ==========================================================================
   21. NADOGRADNJA — NOVE KOMPONENTE
   --------------------------------------------------------------------------
   21.1 Napredak čitanja
   21.2 Uvodni prelaz stranice
   21.3 Od dokumentacije do strategije (potpisna sekcija)
   21.4 Mobilna traka za kontakt
   21.5 Responsive i preference korisnika
   ========================================================================== */

/* ------------------------------------------ 21.1 NAPREDAK ČITANJA */
.scroll-progress{
  position:fixed;
  inset:0 0 auto 0;
  height:3px;
  z-index:130;
  pointer-events:none;
}
.scroll-progress > span{
  display:block;
  width:100%; height:100%;
  background:var(--brass);
  opacity:.9;
  transform:scaleX(var(--sp, 0));
  transform-origin:left;
}

/* ------------------------------------- 21.2 UVODNI PRELAZ STRANICE */
.page-veil{ display:none; }
.js .page-veil{
  display:block;
  position:fixed;
  inset:0;
  z-index:300;
  background:var(--cream);
  pointer-events:none;
  animation:veilLift 620ms var(--ease-editorial) 40ms both;
}
.js .page-veil::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:var(--brass);
  opacity:.55;
}
@keyframes veilLift{
  from{ transform:translateY(0); }
  to{ transform:translateY(-101%); }
}

/* ------------------- 21.3 OD DOKUMENTACIJE DO PRAVNE STRATEGIJE
   Prostorna kompozicija dokumenata izvedena je CSS 3D transformacijama
   (perspective + preserve-3d). Bez dodatnih biblioteka: tekst ostaje oštar,
   učitavanje je trenutno, a scena se ne iscrtava dok nije u vidnom polju. */
.strategy{
  position:relative;
  padding-block:var(--section-y);
  background:var(--ivory);
  border-top:1px solid var(--line);
}

.strategy__intro{ margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.strategy__intro .h2{ max-width:18ch; }
.strategy__sub{
  margin-top:1.75rem;
  max-width:58ch;
  font-size:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height:1.85;
  color:var(--text-soft);
}

/* Naslov se otkriva čistom maskom. */
.mask-reveal{ overflow:hidden; padding-bottom:.08em; }
.js .mask-reveal > span{
  display:block;
  transform:translateY(104%);
  opacity:0;
  transition:transform .95s var(--ease-editorial), opacity .7s var(--ease);
}
.js .mask-reveal.is-in > span{ transform:none; opacity:1; }

.strategy__grid{
  display:grid;
  grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
}

/* --- Scena --- */
.strategy__visual{ align-self:stretch; }
.strategy__sticky{ position:sticky; top:clamp(92px, 12vh, 124px); }

.deskscene{
  position:relative;
  width:100%;
  aspect-ratio:640 / 560;
  max-height:74vh;
  max-width:min(100%, 84vh);
  margin-inline:auto;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:
    radial-gradient(72% 58% at 32% 24%, rgba(255,253,247,.95) 0%, rgba(255,253,247,0) 62%),
    radial-gradient(90% 80% at 78% 92%, rgba(78,91,69,.07) 0%, rgba(78,91,69,0) 60%),
    linear-gradient(168deg, #F7F3EA 0%, var(--cream) 54%, #EFE9DC 100%);
  box-shadow:var(--shadow-soft);
  contain:paint;
}
.deskscene::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--paper);
  opacity:.05;
  pointer-events:none;
  z-index:4;
}
/* Tanka bronzana linija koja zaokružuje kompoziciju u završnoj fazi. */
.deskscene::before{
  content:"";
  position:absolute; inset:14px;
  border:1px solid var(--brass);
  border-radius:2px;
  opacity:0;
  transition:opacity .9s var(--ease) .25s;
  pointer-events:none;
  z-index:3;
}
[data-stage="3"] .deskscene::before{ opacity:.5; }

.deskscene__fit{
  position:absolute;
  left:50%; top:50%;
  width:640px; height:560px;
  margin:-280px 0 0 -320px;
  transform:scale(var(--fit, 1));
  transform-origin:50% 50%;
}
.deskscene__camera{
  position:absolute; inset:0;
  perspective:1500px;
  perspective-origin:50% 44%;
}
.deskscene__world{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:
    translate3d(var(--cam-x, 0px), var(--cam-y, 0px), var(--cam-z, 0px))
    rotateX(var(--cam-rx, 32deg))
    rotateZ(var(--cam-rz, -3deg));
}
/* Kada skrol vodi scenu, položaje upisuje JavaScript po kadru —
   kratka tranzicija samo ublažava korake točkića miša. */
.deskscene__world.is-live{ transition:transform 180ms linear; }
.deskscene__world.is-live .paper,
.deskscene__world.is-live .plan,
.deskscene__world.is-live .folder,
.deskscene__world.is-live .final{
  transition:transform 180ms linear, opacity 180ms linear;
}

/* Radna površina */
.desk{
  position:absolute;
  inset:-52% -34%;
  transform:translateZ(-12px);
  border-radius:6px;
  background:
    radial-gradient(58% 48% at 34% 26%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(160deg, #EFE9DC 0%, #E7E0D0 60%, #DED6C4 100%);
  box-shadow:inset 0 0 60px rgba(23,25,24,.06);
}

/* --- Dokumenti (izmišljeni prikazi, bez stvarnih podataka) --- */
.paper,
.plan,
.folder,
.final{
  position:absolute;
  top:0; left:0;
  transform-style:preserve-3d;
  transform:
    translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px))
    rotateZ(var(--rz, 0deg))
    rotateX(var(--rx, 0deg))
    scale(var(--s, 1));
  opacity:var(--o, 1);
  transition:transform 1.05s var(--ease-editorial), opacity .75s var(--ease);
}

.paper{ width:var(--w, 168px); height:var(--h, 228px); }
.paper--beleske{ --w:152px; --h:114px; }
.paper::before{           /* debljina lista */
  content:"";
  position:absolute; inset:0;
  transform:translateZ(-3px);
  background:#E4DCCB;
  border-radius:3px 2px 4px 2px / 2px 4px 2px 3px;
}
.paper__face{
  position:absolute; inset:0;
  padding:14px 15px;
  border-radius:2px 3px 2px 4px / 3px 2px 4px 2px;
  background:linear-gradient(154deg, #FFFDF8 0%, #FBF7EE 46%, #F2ECDF 100%);
  box-shadow:
    0 1px 1px rgba(23,25,24,.05),
    0 8px 14px rgba(23,25,24,.06),
    0 22px 34px rgba(23,25,24,.07);
  overflow:hidden;
}
.paper__label{
  display:block;
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.2;
  color:var(--text-soft);
}
.paper__rule{
  display:block;
  height:1px;
  margin:9px 0 12px;
  background:var(--line-strong);
}
.paper__block{
  display:block;
  background:repeating-linear-gradient(
    to bottom,
    rgba(23,25,24,.22) 0 2px,
    transparent 2px 11px
  );
}
.paper__block--tall { height:66px; margin-bottom:12px; }
.paper__block--mid  { height:44px; margin-top:10px; }
.paper__block--short{ height:33px; margin-top:12px; width:76%; }
.paper__block--note { height:44px; }

.paper__table{
  display:grid;
  grid-template-columns:34% 1fr;
  gap:7px 8px;
  margin-bottom:10px;
}
.paper__table i{
  display:block;
  height:2px;
  background:rgba(23,25,24,.2);
}
.paper__table i:nth-child(2n){ background:rgba(23,25,24,.14); }

/* Prigušeni bronzani naglasak — bez markera u jarkoj boji. */
.paper__hl{
  display:block;
  height:8px;
  margin:2px 0;
  border-radius:1px;
  background:var(--brass);
  opacity:0;
  transform:scaleX(.25);
  transform-origin:left;
  transition:opacity .7s var(--ease), transform .9s var(--ease-editorial);
}
.paper__seal{
  position:absolute;
  right:14px; bottom:16px;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(78,91,69,.4);
  box-shadow:inset 0 0 0 4px rgba(251,249,244,.9), inset 0 0 0 5px rgba(78,91,69,.28);
}
.paper__sign{
  position:absolute;
  left:15px; bottom:30px;
  width:70px; height:20px;
  stroke:rgba(23,25,24,.42);
  stroke-width:1.4;
  fill:none;
}
.paper__signline{
  position:absolute;
  left:15px; bottom:24px;
  width:74px; height:1px;
  background:var(--line-strong);
}
.paper__fold{
  position:absolute;
  left:0; right:0; top:44%;
  height:14px;
  background:linear-gradient(to bottom, rgba(23,25,24,.07), rgba(255,255,255,.5));
  opacity:.7;
  pointer-events:none;
}
.paper__tab{
  position:absolute;
  right:-5px; top:26px;
  width:14px; height:32px;
  border-radius:0 2px 2px 0;
  background:var(--brass);
  opacity:.72;
  transform:translateZ(-1px);
}
.paper__tab--olive{ background:var(--olive); opacity:.5; top:66px; }

/* Skica parcele — razvija se ispod dokumenata */
.plan{ width:120px; height:150px; }
.plan__face,
.plan__wing{
  position:absolute;
  top:0;
  width:120px; height:150px;
  padding:12px 12px 10px;
  border-radius:2px 3px 2px 3px;
  background:linear-gradient(152deg, #FFFDF8 0%, #FAF6EC 52%, #F1EBDE 100%);
  box-shadow:0 1px 1px rgba(23,25,24,.05), 0 10px 18px rgba(23,25,24,.07);
  backface-visibility:hidden;
}
.plan__face{ left:0; }
.plan .paper__label{ font-size:9px; letter-spacing:.12em; }
.plan .paper__rule{ margin:7px 0 4px; }
.plan__wing{
  left:120px;
  transform-origin:left center;
  transform:rotateY(-176deg);
  transition:transform 1.15s var(--ease-editorial);
}
[data-stage="1"] .plan__wing,
[data-stage="2"] .plan__wing,
[data-stage="3"] .plan__wing{ transform:rotateY(0deg); }

.plan__draw{ display:block; width:100%; height:auto; margin-top:8px; }
.plan__grid path{ stroke:var(--line); stroke-width:.8; }
.plan__lot path{
  stroke:var(--brass);
  stroke-width:1.4;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.2s var(--ease-editorial) .2s;
}
.plan__object rect{ fill:rgba(78,91,69,.16); stroke:var(--olive); stroke-width:.9; }
.plan__path path{ stroke:var(--olive); stroke-width:1.1; opacity:.7; }
.plan__dot circle{ fill:var(--brass); opacity:.7; }
.plan__ref{
  font-family:var(--sans);
  font-size:7px;
  letter-spacing:.08em;
  fill:var(--walnut);
  opacity:.9;
}
[data-stage="1"] .plan__lot path,
[data-stage="2"] .plan__lot path,
[data-stage="3"] .plan__lot path{ stroke-dashoffset:0; }

/* Fascikla predmeta */
.folder{ width:250px; height:184px; }
.folder__back,
.folder__front{
  position:absolute; inset:0;
  border-radius:3px 10px 3px 3px;
}
.folder__back{
  background:linear-gradient(150deg, #D9CBB2 0%, #CDBEA3 100%);
  transform:translateZ(-4px);
  box-shadow:0 16px 26px rgba(23,25,24,.10);
}
.folder__front{
  top:16px;
  padding:14px 18px;
  background:linear-gradient(150deg, #E3D6BE 0%, #D6C7AB 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.5) inset, 0 10px 20px rgba(23,25,24,.08);
}
.folder__label{
  display:block;
  font-family:var(--sans);
  font-size:10px;
  font-weight:500;
  letter-spacing:.22em;
  color:#5A4A31;
}
.folder__line{
  display:block;
  width:54px; height:1px;
  margin-top:8px;
  background:var(--brass);
  opacity:.8;
}

/* Završni dokument strategije */
.final{ width:222px; height:302px; }
.final__lift{
  position:absolute; inset:0;
  transform:rotateX(var(--upright, 0deg));
  transform-style:preserve-3d;
}
.final__face{
  position:absolute; inset:0;
  padding:18px 18px 16px;
  border-radius:2px;
  background:linear-gradient(158deg, #FFFFFF 0%, #FDFBF6 44%, #F5F0E5 100%);
  box-shadow:
    0 2px 3px rgba(23,25,24,.06),
    0 18px 30px rgba(23,25,24,.10),
    0 42px 64px rgba(23,25,24,.10);
  display:flex;
  flex-direction:column;
}
.final__label{
  font-family:var(--sans);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--walnut);
}
.final__rule{
  display:block;
  height:1px;
  margin:9px 0 12px;
  background:var(--brass);
  opacity:.75;
}
.final__row{
  display:block;
  margin-bottom:11px;
}
.final__row em{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:8px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--charcoal);
  margin-bottom:5px;
}
.final__row i{
  display:block;
  height:2px;
  background:rgba(23,25,24,.16);
}
.final__row:nth-child(3) i{ width:82%; }
.final__row:nth-child(5) i{ width:70%; }
.final__row:nth-child(7) i{ width:88%; }
.final__close{
  display:block;
  height:1px;
  margin-top:auto;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease-editorial) .5s;
}
[data-stage="3"] .final__close{ transform:scaleX(1); }

/* Veze, granice i pravci postupanja */
.wires{
  position:absolute;
  inset:0;
  width:640px; height:560px;
  transform:translateZ(14px);
  overflow:visible;
}
.wires path{ fill:none; }
.wires__link path{
  stroke:var(--brass);
  stroke-width:1.3;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
  transition:stroke-dashoffset 1.1s var(--ease-editorial), opacity .6s var(--ease);
}
.wires__dot circle{ fill:var(--brass); opacity:0; transition:opacity .6s var(--ease) .3s; }
.focus-ring{ opacity:0; transition:opacity .7s var(--ease) .35s; }
.focus-ring rect{ fill:none; stroke:var(--walnut); stroke-width:1; opacity:.65; }
.focus-ring path{ stroke:var(--walnut); stroke-width:1; opacity:.45; }
[data-stage="1"] .focus-ring{ opacity:1; }

.wires__branch{ opacity:0; transition:opacity .35s var(--ease); }
.wires__branch path{
  stroke:var(--brass);
  stroke-width:1.4;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s var(--ease-editorial);
}
.wires__route{ opacity:.3; }
.wires__route--a{ opacity:.95; stroke-width:1.9; }
.wires__route--c{ stroke:var(--olive); opacity:.5; }
.wires__node{ fill:var(--brass); }

[data-stage="1"] .wires__link path{ stroke-dashoffset:0; opacity:.85; }
[data-stage="1"] .wires__dot circle{ opacity:.8; }
[data-stage="2"] .wires__link path{ stroke-dashoffset:0; opacity:.25; }
[data-stage="2"] .wires__branch{ opacity:1; transition-delay:.35s; }
[data-stage="2"] .wires__branch path{ stroke-dashoffset:0; transition-delay:.4s; }

/* Oznake na dokumentima */
.tag,
.route-tag{
  position:absolute;
  top:0; left:0;
  transform:translate3d(var(--x, 0px), var(--y, 0px), var(--z, 30px));
  font-family:var(--sans);
  font-size:9px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:5px 9px;
  border-radius:2px;
  background:rgba(251,249,244,.94);
  border:1px solid var(--line-strong);
  color:var(--text-soft);
  opacity:0;
  transition:opacity .35s var(--ease), transform .9s var(--ease-editorial);
  box-shadow:0 4px 10px rgba(23,25,24,.06);
}
.tag--fact{ --x:224px; --y:96px; }
.tag--rel { --x:238px; --y:196px; }
.tag--doc { --x:404px; --y:286px; }
.tag--base{ --x:150px; --y:486px; }
[data-stage="1"] .tag{ opacity:1; transition-delay:.25s; }
[data-stage="1"] .tag--rel{ border-color:var(--brass); color:var(--walnut); }

.route-tag{ border-color:var(--line-strong); }
.route-tag--a{ --x:434px; --y:139px; border-color:var(--brass); color:var(--walnut); }
.route-tag--d{ --x:434px; --y:174px; font-size:8px; color:var(--olive); border-color:rgba(78,91,69,.35); }
.route-tag--b{ --x:434px; --y:289px; }
.route-tag--c{ --x:434px; --y:441px; color:var(--olive); }
[data-stage="2"] .route-tag{ opacity:1; transition-delay:.55s; }

/* ---------- Faza 01 · pregled činjenica ---------- */
[data-stage="0"] .paper--resenje { --x:358px; --y:298px; --z:6px;  --rz:-5deg; --o:.92; }
[data-stage="0"] .paper--katastar{ --x:330px; --y:128px; --z:14px; --rz:6deg; }
[data-stage="0"] .paper--ugovor  { --x:150px; --y:70px;  --z:28px; --rz:-8deg; }
[data-stage="0"] .plan           { --x:118px; --y:352px; --z:2px;  --rz:9deg;  --o:.85; }
[data-stage="0"] .paper--beleske { --x:248px; --y:206px; --z:38px; --rz:-7deg; --o:.62; }
[data-stage="0"] .paper--ugovor .paper__hl,
[data-stage="0"] .paper--katastar .paper__hl{ opacity:.18; transform:scaleX(.62); }

/* ---------- Faza 02 · analiza dokumentacije ---------- */
[data-stage="1"] .paper--ugovor  { --x:44px;  --y:56px;  --z:10px; --rz:0deg; }
[data-stage="1"] .paper--katastar{ --x:400px; --y:56px;  --z:10px; --rz:0deg; }
[data-stage="1"] .plan           { --x:44px;  --y:320px; --z:6px;  --rz:0deg; --o:1; }
[data-stage="1"] .paper--resenje { --x:400px; --y:310px; --z:10px; --rz:0deg; --o:1; }
[data-stage="1"] .paper--beleske { --x:236px; --y:416px; --z:16px; --rz:-2deg; --o:.68; --s:.86; }
[data-stage="1"] .paper__hl{ opacity:.2; transform:scaleX(1); }

/* ---------- Faza 03 · procena mogućnosti i rizika ---------- */
[data-stage="2"] .paper--ugovor  { --x:44px;  --y:56px;  --z:-8px; --o:.16; --s:.97; }
[data-stage="2"] .paper--katastar{ --x:400px; --y:56px;  --z:-8px; --o:.16; --s:.97; }
[data-stage="2"] .plan           { --x:44px;  --y:320px; --z:-8px; --o:.16; --s:.97; }
[data-stage="2"] .paper--resenje { --x:400px; --y:310px; --z:-8px; --o:.16; --s:.97; }
[data-stage="2"] .paper--beleske { --x:236px; --y:416px; --z:-8px; --o:.1;  --s:.84; }

/* ---------- Faza 04 · jasna pravna strategija ---------- */
[data-stage="3"] .paper,
[data-stage="3"] .plan{ --x:190px; --y:340px; --z:2px; --rz:0deg; --o:0; --s:.72; }
[data-stage="3"] .folder{ --x:130px; --y:306px; --z:6px; --rz:-2deg; --o:1; }
[data-stage="3"] .final { --x:250px; --y:66px;  --z:104px; --o:1; }

.folder{ --o:0; --x:130px; --y:340px; --s:.9; }
.final{ --o:0; --x:250px; --y:110px; --z:60px; --s:.94; }

/* --- Tekst faza --- */
.strategy__col{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1rem,2vw,1.75rem);
  align-items:start;
}

.stageprog{
  position:sticky;
  top:calc(clamp(92px, 12vh, 124px) + 12vh);
  padding-block:4px;
}
.stageprog__rail{
  position:absolute;
  left:9px; top:10px; bottom:10px;
  width:1px;
  background:var(--line-strong);
  overflow:hidden;
}
.stageprog__fill{
  display:block;
  width:100%; height:100%;
  background:var(--brass);
  transform:scaleY(var(--sp, 0));
  transform-origin:top;
  transition:transform .5s var(--ease);
}
.stageprog__list{
  position:relative;
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:clamp(1.1rem, 2.2vw, 1.9rem);
}
.stageprog__item span{
  display:grid;
  place-items:center;
  width:19px; height:19px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--ivory);
  font-family:var(--serif);
  font-size:.66rem;
  letter-spacing:.02em;
  color:var(--text-soft);
  transition:border-color .5s var(--ease), color .5s var(--ease),
             background-color .5s var(--ease), transform .5s var(--ease-editorial);
}
.stageprog__item.is-on span{ border-color:var(--brass); color:var(--walnut); }
.stageprog__item.is-current span{
  background:var(--brass);
  border-color:var(--brass);
  color:var(--ivory);
  transform:scale(1.1);
}

.strategy__stages{ list-style:none; margin:0; padding:0; }

.stage{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:78vh;
  padding-block:2rem;
  opacity:.72;
  transition:opacity .6s var(--ease);
}
.stage.is-current{ opacity:1; }
.stage::before{
  content:"";
  width:3.5rem; height:1px;
  background:var(--brass);
  transform:scaleX(.3);
  transform-origin:left;
  transition:transform .7s var(--ease-editorial);
  margin-bottom:clamp(1.25rem,2.5vw,1.75rem);
}
.stage.is-current::before{ transform:scaleX(1); }

.stage__title{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.6rem;
  font-size:clamp(1.5rem, 1.2rem + 1.1vw, 2.15rem);
  color:var(--charcoal);
  margin-bottom:1.1rem;
}
.stage__num{ font-family:var(--serif); color:var(--brass); }
.stage__dash{ color:var(--line-strong); }
.stage__text{
  max-width:42ch;
  color:var(--text-soft);
  line-height:1.85;
  margin:0;
}
.stage__note{
  margin:1.25rem 0 0;
  padding-left:1rem;
  border-left:1px solid var(--brass);
  font-family:var(--serif);
  font-size:1.125rem;
  font-style:italic;
  color:var(--walnut);
  max-width:34ch;
}

/* --- Pojednostavljeni prikaz po fazi (telefon i „reduced motion") --- */
.vignette{
  position:relative;
  display:none;
  width:100%;
  max-width:320px;
  aspect-ratio:300 / 150;
  margin-top:2rem;
  perspective:760px;
}
.vpaper{
  position:absolute;
  width:64px; height:86px;
  border-radius:2px;
  padding:8px 7px;
  background:linear-gradient(152deg, #FFFDF8 0%, #FAF6EC 55%, #F1EBDE 100%);
  border:1px solid var(--line);
  box-shadow:0 6px 14px rgba(23,25,24,.08);
  transition:transform .9s var(--ease-editorial), opacity .7s var(--ease);
}
.vpaper i{
  display:block;
  height:2px;
  margin-bottom:5px;
  background:rgba(23,25,24,.18);
}
.vpaper i:nth-child(2){ width:76%; }
.vpaper i:nth-child(3){ width:58%; }
.vmark{
  position:absolute;
  left:34%; top:47%;
  width:38px; height:7px;
  border-radius:1px;
  background:var(--brass);
  opacity:.24;
}
.vwire{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.vwire path{
  fill:none;
  stroke:var(--brass);
  stroke-width:1.3;
  opacity:.55;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1s var(--ease-editorial) .25s;
}
.vwire path.is-strong{ opacity:1; stroke-width:1.7; }
.vwire circle{ fill:var(--brass); }
.vignette.is-in .vwire path{ stroke-dashoffset:0; }

.vtag{
  position:absolute;
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 7px;
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:var(--ivory);
  color:var(--text-soft);
}
.vtag{ white-space:nowrap; }
.vtag--a{ left:62%; top:10%; border-color:var(--brass); color:var(--walnut); }
.vtag--b{ left:62%; top:44%; }
.vtag--c{ left:62%; top:74%; color:var(--olive); }

/* pojedinačne kompozicije */
.vignette--scatter .vpaper--1{ left:6%;  top:12%; transform:rotate(-8deg); }
.vignette--scatter .vpaper--2{ left:28%; top:24%; transform:rotate(5deg) translateZ(14px); }
.vignette--scatter .vpaper--3{ left:52%; top:8%;  transform:rotate(-3deg) translateZ(26px); }
.js .vignette--scatter:not(.is-in) .vpaper{ opacity:0; transform:translateY(12px); }
/* Papiri ulaze jedan za drugim — mirnije nego kada svi krenu odjednom. */
.vignette .vpaper:nth-child(1){ transition-delay:0ms; }
.vignette .vpaper:nth-child(2){ transition-delay:90ms; }
.vignette .vpaper:nth-child(3){ transition-delay:180ms; }

.vignette--align .vpaper{ top:16%; }
.vignette--align .vpaper--1{ left:4%; }
.vignette--align .vpaper--2{ left:32%; }
.vignette--align .vpaper--3{ left:60%; }
.vignette--align .vpaper--plan{ display:grid; place-items:center; padding:6px; }
.vignette--align .vpaper--plan svg{ width:100%; height:auto; }
.vplan{ stroke:var(--brass); stroke-width:1.4; fill:none; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s var(--ease-editorial) .35s; }
.vignette--align.is-in .vplan{ stroke-dashoffset:0; }
.js .vignette--align:not(.is-in) .vpaper{ opacity:0; transform:translateY(10px); }

.vignette--routes .vpaper--1{ left:4%; top:22%; }
.js .vignette--routes:not(.is-in) .vpaper,
.js .vignette--routes:not(.is-in) .vtag{ opacity:0; }
.vignette--routes .vtag{ transition:opacity .6s var(--ease) .5s; }

.vignette--final{ display:none; }
.vfolder{
  position:absolute;
  left:14%; top:34%;
  width:150px; height:76px;
  border-radius:3px 10px 3px 3px;
  background:linear-gradient(150deg, #E3D6BE 0%, #D6C7AB 100%);
  box-shadow:0 10px 18px rgba(23,25,24,.10);
}
.vfinal{
  position:absolute;
  left:34%; top:6%;
  width:104px; height:126px;
  padding:11px 12px;
  border-radius:2px;
  background:linear-gradient(158deg, #FFFFFF 0%, #FDFBF6 46%, #F5F0E5 100%);
  border:1px solid var(--line);
  box-shadow:0 14px 26px rgba(23,25,24,.12);
  display:flex;
  flex-direction:column;
  transition:transform .9s var(--ease-editorial), opacity .7s var(--ease);
}
.vfinal em{
  font-family:var(--sans);
  font-style:normal;
  font-size:.5rem;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--walnut);
  margin-bottom:8px;
}
.vfinal i{
  display:block;
  height:2px;
  margin-bottom:7px;
  background:rgba(23,25,24,.16);
}
.vfinal i:nth-child(3){ width:74%; }
.vfinal i:nth-child(5){ width:62%; }
.vfinal__close{
  display:block;
  height:1px;
  margin-top:auto;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1s var(--ease-editorial) .4s;
}
.vignette--final.is-in .vfinal__close{ transform:scaleX(1); }
.js .vignette--final:not(.is-in) .vfinal{ opacity:0; transform:translateY(14px); }

/* --- Zaključak sekcije --- */
.strategy__outro{
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem 2.5rem;
}
.strategy__statement{
  font-family:var(--serif);
  font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  line-height:1.3;
  color:var(--charcoal);
  max-width:24ch;
  margin:0;
}
/* Bronzana nit koja se nastavlja u narednu sekciju. */
.strategy__thread{
  position:absolute;
  left:50%;
  bottom:calc(-1 * clamp(2rem, 4vw, 3rem));
  width:1px;
  height:clamp(4rem, 8vw, 6rem);
  background:linear-gradient(to bottom, var(--brass), rgba(154,116,75,0));
  opacity:.6;
}

/* --------------------------------- 21.4 MOBILNA TRAKA ZA KONTAKT */
.mobile-bar{
  display:none;
  position:fixed;
  inset:auto 0 0 0;
  z-index:110;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:1px;
  background:rgba(23,25,24,.16);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  box-shadow:0 -8px 28px rgba(23,25,24,.16);
  transform:translateY(115%);
  visibility:hidden;
  transition:transform .45s var(--ease-editorial), visibility .45s;
}
.mobile-bar.is-visible{ transform:none; visibility:visible; }

.mobile-bar a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:56px;
  padding:.5rem 1rem;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
}
.mobile-bar a svg{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.mobile-bar__main{
  background:var(--olive);
  color:var(--ivory);
  padding-inline:1.25rem;
}
.mobile-bar__main svg{ stroke:var(--brass-light); }
.mobile-bar__main:active{ background:var(--olive-deep); }
.mobile-bar__alt{
  background:var(--charcoal);
  color:var(--stone);
  padding-inline:1.15rem;
}
.mobile-bar__alt:active{ background:#0f100f; }

/* ------------------------ 21.5 RESPONSIVE — NOVE KOMPONENTE */

/* Tablet: jednostavnija kompozicija, kraće zadržavanje */
@media (max-width:1180px){
  .strategy__grid{ gap:clamp(1.5rem,3.5vw,2.5rem); }
  .deskscene{ max-height:66vh; max-width:min(100%, 74vh); }
  .stage{ min-height:70vh; }
  .stage__note{ font-size:1.0625rem; }
  /* Manje sitnih detalja na užem ekranu */
  .paper__seal, .paper__tab{ display:none; }
  .route-tag--d{ display:none; }
}

@media (max-width:1100px){
  /* Vremenska linija prelazi u uspravnu */
  .steps{ grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .timeline__rail{
    left:6px; right:auto; top:6px; bottom:6px;
    width:1px; height:auto;
  }
  .timeline__fill{
    transform:scaleY(var(--tp, 0));
    transform-origin:top;
  }
  .step{ padding-top:0; padding-left:2.5rem; }
  .step__dot{ top:6px; }
  .step p{ max-width:52ch; }
}

@media (max-width:900px){
  /* Telefon: bez zakucane scene — četiri koraka, prirodno skrolovanje */
  .strategy__visual{ display:none; }
  .strategy__grid{ grid-template-columns:minmax(0,1fr); }
  .strategy__col{ grid-template-columns:minmax(0,1fr); }
  .stageprog{ display:none; }
  .stage{
    min-height:0;
    opacity:1;
    padding-block:0 clamp(2.5rem,7vw,3.5rem);
  }
  .stage + .stage{ padding-top:clamp(2rem,6vw,3rem); border-top:1px solid var(--line); }
  .stage__note{ margin-top:1rem; }
  /* Faza van ekrana se ne iscrtava — manje posla pri skrolovanju.
     Procenjena visina drži dužinu trake za skrol stabilnom. */
  /* Linija iznad naslova faze prati pojavljivanje male grafike. */
  .stage::before{ transform:scaleX(1); }
  .js .stage:has(.vignette:not(.is-in))::before{ transform:scaleX(.3); }
  .vignette,
  .vignette--final{ display:block; }
  /* Jeftinija senka na telefonu */
  .vpaper{ box-shadow:0 4px 10px rgba(23,25,24,.07); }
  .vfinal{ box-shadow:0 8px 18px rgba(23,25,24,.10); }
  .strategy__outro{ margin-top:clamp(2rem,5vw,3rem); }

  .mobile-bar{ display:grid; }
  /* Prostor za traku — bez pomeranja sadržaja kada se pojavi */
  .site-footer{ padding-bottom:calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
  .cookie{ bottom:calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
  /* Traka se sklanja dok je otvoren meni */
  body.is-locked .mobile-bar{ transform:translateY(115%); }
}

@media (max-width:640px){
  .mobile-bar a{ font-size:.68rem; letter-spacing:.1em; }
  .mobile-bar__alt{ padding-inline:.95rem; }
  .mobile-bar__alt span{ display:none; }
  .mobile-bar__alt svg{ width:20px; height:20px; }
}

/* --------------------- 21.6 HERO — RESPONSIVE NADOGRADNJA */
@media (max-width:1100px){
  .hero__inner{ gap:clamp(1.5rem,3vw,2.5rem); }
  .hero__figure{ max-width:400px; }
  .cadastre{ left:-22%; width:124%; }
}

@media (max-width:900px){
  .hero{ padding-top:clamp(104px,22vw,132px); }
  .hero__inner{ grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,7vw,3.5rem); }
  .hero__title{ max-width:none; }
  .hero__figure{
    justify-self:center;
    max-width:min(420px, 82vw);
  }
  .cadastre{ top:-6%; left:-16%; width:120%; height:112%; opacity:.4; }
  .hero__panel{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hero__panel-item{ font-size:.66rem; letter-spacing:.12em; }
}

@media (max-width:560px){
  .signature__mark{ width:248px; }
  .signature__mark .sig-tail{ stroke-width:3.9; }

  .hero__label{ font-size:.625rem; letter-spacing:.16em; gap:.7rem; }
  .hero__label-line{ width:2rem; }
  .hero__actions{ flex-direction:column; align-items:stretch; gap:1.25rem; }
  .hero__actions .btn{ width:100%; }
  .hero__actions .link-arrow{ justify-content:center; }
  .hero__panel{ grid-template-columns:minmax(0,1fr); }
  .hero__panel-item{ padding-block:.95rem; }
}

/* ---------------------------- 21.7 PREFERENCE I ŠTAMPA */
@media (prefers-reduced-motion: reduce){
  /* Hero se prikazuje odmah, bez pomeranja. */
  .hero__label,
  .hero__label-line,
  .hero__line > span,
  .hero__lead,
  .hero__actions,
  .hero__panel,
  .hero__photo-mask,
  .hero__photo-mask picture,
  .hero .cadastre,
  .hero__frame rect,
  .cadastre__plot path,
  .cadastre__dims path,
  .cadastre__dots,
  .cadastre__labels,
  .cadastre__north{ animation:none !important; }
  .hero__frame rect,
  .cadastre__plot path,
  .cadastre__dims path{ stroke-dashoffset:0; }
  .js .page-veil{ display:none; }
  .portrait__img,
  .hero__photo{ transform:none !important; }

  /* Naslovi i tekst su odmah vidljivi. */
  .js .mask-reveal > span{ transform:none; opacity:1; }

  /* Sekcija „Od dokumentacije do jasne pravne strategije":
     bez pokretne kamere i bez dugog skrol-vezanog prikaza. Raspored ostaje
     onakav kakav pripada datoj širini ekrana — scena na širokom, četiri
     koraka na uskom. Menja se samo to što se ništa ne pomera. */
  .stageprog{ display:none; }
  .stage{
    min-height:0;
    opacity:1;
    padding-block:0 clamp(2.5rem,7vw,3.5rem);
  }
  .stage + .stage{ padding-top:clamp(2rem,6vw,3rem); border-top:1px solid var(--line); }
  .stage::before{ transform:scaleX(1); }
  .js .vignette .vpaper,
  .js .vignette .vtag,
  .js .vignette .vfinal{ opacity:1 !important; transform:none !important; }
  .vwire path,
  .vplan{ stroke-dashoffset:0 !important; }
  .vfinal__close{ transform:scaleX(1) !important; }

  /* Potpis u sekciji „O advokatu" — bez iscrtavanja. */
  .signature__mark .sig-wipe{ transform:none !important; }
  .signature__mark .sig-tail{ stroke-dashoffset:0 !important; }
  .signature__role{ opacity:1 !important; transform:none !important; }
}

@media print{
  .scroll-progress,
  .page-veil,
  .mobile-bar,
  .strategy__visual,
  .stageprog,
  .vignette,
  .hero .cadastre,
  .hero__frame{ display:none !important; }
  .stage{ min-height:0; opacity:1; page-break-inside:avoid; }
  .strategy__sticky{ position:static; }
  .signature__mark .sig-wipe{ transform:none !important; }
  .signature__mark .sig-tail{ stroke-dashoffset:0 !important; }
}