@font-face {
  font-family: 'Montserrat';
  src: url('../img/Montserrat-reg.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../img/Montserrat-semi.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--pismo);
  font-size: var(--slog-telo);
  line-height: var(--red-telo);
  color: var(--mastilo);
  background: var(--ploha);
  -webkit-font-smoothing: antialiased;
}

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

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

ul {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--znak);
  outline-offset: 3px;
}

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

h1,
h2,
h3 {
  font-weight: var(--debljina-glas);
  color: var(--mastilo);
  text-wrap: balance;
}

h1 {
  font-size: var(--slog-1);
  line-height: var(--red-display);
  letter-spacing: var(--zbij-1);
}

h2 {
  font-size: var(--slog-2);
  line-height: var(--red-naslov);
  letter-spacing: var(--zbij-2);
}

h3 {
  font-size: var(--slog-3);
  line-height: var(--red-3);
  letter-spacing: var(--zbij-3);
}

p {
  color: var(--mastilo-tiho);
}

strong {
  font-weight: var(--debljina-glas);
  color: var(--mastilo);
}

.vodeci,
.hero__uvod,
.sek-glava p:not(.nad),
.investitori__vodeci,
.dvokolone__vodeci,
.pr-glava__uvod {
  font-size: var(--slog-vodeci);
  line-height: 1.5;
}
.investitori__vodeci,
.dvokolone__vodeci {
  color: var(--mastilo);
}

.nad {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--slog-znak);
  font-weight: var(--debljina-glas);
  letter-spacing: var(--razmak-znak);
  text-transform: uppercase;
  color: var(--mastilo-tiho);
}
.nad::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--znak); 
}

.omot {
  width: 100%;
  max-width: var(--sirina);
  margin-inline: auto;
  padding-inline: var(--zid);
}

.sekcija {
  padding-block: var(--p6);
}

.sekcija--linija {
  border-top: 1px solid var(--linija);
  padding-top: clamp(3rem, 5.5vw, 5.5rem);
}

.sek-glava {
  max-width: 58ch;
  margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
}
.sek-glava h2 {
  margin-top: var(--p2);
}
.sek-glava p {
  margin-top: var(--p2);
}

.dug {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.9rem;
  font-family: var(--pismo);
  font-size: var(--slog-sitno);
  font-weight: var(--debljina-glas);
  letter-spacing: var(--razmak-sitno);
  border: 1px solid transparent;
  border-radius: var(--radijus);
  cursor: pointer;
  transition: background var(--brzo) var(--kriva), color var(--brzo) var(--kriva),
    border-color var(--brzo) var(--kriva);
}

.dug {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.dug::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--brzo) var(--kriva);
}
.dug:hover::before {
  transform: scaleX(1);
}
.dug--glavno {
  background: var(--znak);
  color: #101010;
}
.dug--glavno::before {
  background: var(--znak-jace);
}

.dug--obris {
  border-color: var(--linija);
  color: var(--mastilo);
}
.dug--obris::before {
  background: var(--ploha-tiha);
}
.dug--obris:hover {
  border-color: var(--mastilo);
}

.dug--manje {
  padding: 0.6rem 1.25rem;
}

.dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.znacka,
.projekat__stanje {
  display: inline-flex;
  align-items: center;
  font-size: var(--slog-znak);
  font-weight: var(--debljina-glas);
  letter-spacing: var(--razmak-znak);
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--linija);
  border-radius: 999px;
  color: var(--mastilo-tiho);
}
.znacka--prodaja,
.projekat__stanje--prodaja {
  border-color: var(--znak);
  color: var(--znak-slog);
}

.mesto,
.projekat__mesto,
.stub__rb,
.vest__datum,
.podatak__ime,
.podnozje h3,
.kontakt-blok h2,
.polje-forme label {
  font-size: var(--slog-znak);
  font-weight: var(--debljina-glas);
  letter-spacing: var(--razmak-znak);
  text-transform: uppercase;
  color: var(--mastilo-tiho);
}

.red__vise,
.projekat__veze a,
.kontakt-veze a,
.ostali__vise {
  font-size: var(--slog-sitno);
  font-weight: var(--debljina-glas);
  color: var(--mastilo);
  box-shadow: inset 0 -1px 0 var(--linija);
  padding-bottom: 2px;
  transition: box-shadow var(--brzo) var(--kriva);
}
.red__vise:hover,
.projekat__veze a:hover,
.kontakt-veze a:hover,
.ostali__vise:hover {
  box-shadow: inset 0 -1px 0 var(--znak);
}

.ceka {
  display: inline-flex;
  align-items: center;
  gap: var(--p1);
  font-size: var(--slog-sitno);
  font-weight: var(--debljina-slog);
  color: var(--mastilo-tiho);
  border: 1px dashed var(--linija);
  border-radius: var(--radijus-malo);
  padding: 0.4rem 0.7rem;
}
.ceka::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--znak);
  flex-shrink: 0;
}

.zaglavlje {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ploha);
  border-bottom: 1px solid var(--linija);
  transition: background var(--brzo) var(--kriva), border-color var(--brzo) var(--kriva);
}

body:has(.hero__stalak) .zaglavlje {
  border-bottom-color: transparent;
}
body:has(.hero__stalak) .zaglavlje--pun {
  border-bottom-color: var(--linija);
  backdrop-filter: blur(10px);
}

body:has(.hero__stalak) .zaglavlje--odmakla:not(.zaglavlje--pun) {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  body:has(.hero__stalak) .zaglavlje {
    transition: background var(--brzo) var(--kriva),
                border-color var(--brzo) var(--kriva),
                transform var(--sporo) var(--kriva);
  }
}

.zaglavlje__red {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p4);
  min-height: var(--visina-zaglavlja);
}

.brava {
  display: block;
  flex-shrink: 0;
}
.brava img {
  height: 42px;              
  width: auto;
}
@media (min-width: 2560px) {
  .brava img {
    height: 56px;
  }
}

.red__crtez--znak {
  display: flex;
  align-items: center;
  justify-content: center;
}
.red__crtez--znak img {
  width: 56%;
  max-width: 300px;
  height: auto;
  filter: grayscale(1);
  opacity: 0.8;
}

.meni {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.2rem);
}
.meni a {
  font-size: var(--slog-sitno);
  letter-spacing: var(--razmak-sitno);
  color: var(--mastilo-tiho);
  padding-block: 0.4rem;
  transition: color var(--brzo) var(--kriva);
}
.meni a:hover,
.meni a[aria-current] {
  color: var(--mastilo);
}
.meni a[aria-current] {
  font-weight: var(--debljina-glas);
}

.meni a:not(.dug) {
  position: relative;
}
.meni a:not(.dug)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 1px;
  background: var(--znak);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--brzo) var(--kriva);
}
.meni a:not(.dug):hover::after,
.meni a:not(.dug)[aria-current]::after {
  transform: scaleX(1);
}

@media (min-width: 2560px) {
  .meni a {
    font-size: var(--slog-telo);
  }
}

.jezik {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.jezik a + a {
  border-left: 1px solid var(--linija);
  padding-left: 0.7rem;
}

.zaglavlje .dug {
  padding: 0.62rem 1.25rem;
  border-radius: var(--radijus-malo);
}

.meni a.dug--glavno {
  color: #101010;
}

.burger {
  display: none;
  background: none;
  border: 0;
  color: var(--mastilo);
  padding: 14px 10px;
  cursor: pointer;
}
.burger__crta {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--brzo) var(--kriva);
}
.burger__crta + .burger__crta {
  margin-top: 6px;
}
.burger[aria-expanded="true"] .burger__crta:first-child {
  transform: translateY(4px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__crta:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.hero {
  position: relative;
}

.hero:has(.hero__stalak) {
  margin-top: calc(-1 * var(--visina-zaglavlja));
}

.hero__stalak {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--ploha);
  
  padding-block: clamp(3rem, 8vh, 6rem)
    calc(clamp(3rem, 8vh, 6rem) + var(--pojas-ispod-tla));
}

.hero:not(:has(.hero__stalak)) {
  padding-block: clamp(4.5rem, 10vw, 9rem) clamp(11rem, 26vw, 22rem);
  overflow: hidden;
  isolation: isolate;
}

.hero--skrol {
  height: 250vh;
}
.hero--skrol .hero__stalak {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
}

.hero__slog {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: var(--slog-display);
  line-height: var(--red-display);
  letter-spacing: var(--zbij-display);
  
  margin-block: 0 var(--p3);
  max-width: 16ch;
}

.preliv {
  background-image: linear-gradient(
    90deg,
    var(--mastilo-tiho) 0 50%,
    var(--mastilo) 50% 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;   
  background-repeat: no-repeat;
}
@supports (-webkit-background-clip: text) {
  .preliv {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
    padding-bottom: 0.14em;
  }
  .hero h1.preliv { margin-bottom: calc(var(--p3) - 0.14em); }
}

.hero__uvod {
  max-width: 58ch;
  margin-bottom: var(--p4);
}

.hero__cinjenica {
  font-size: var(--slog-sitno);
  color: var(--mastilo-tiho);
  max-width: 62ch;
  margin-bottom: var(--p3);
  padding-top: var(--p2);
  border-top: 1px solid var(--linija);
}

.naselje {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(200px, 34vw, 400px);
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero__stalak .naselje {
  inset: 0;
  height: auto;
}

.hero--stiki {
  min-height: 180vh;
}
.hero--stiki .hero__stalak {
  position: sticky;
  top: 0;
}
.hero--stiki .naselje {
  transform-origin: 50% 100%;
}
.naselje svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.naselje__tlo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.7%;
  height: 1px;
  background: var(--mastilo);
}

.naselje--jako svg {
  right: 0;
  left: 0;
  width: 100%;
  min-width: 0;
}

.tlo {
  stroke: var(--mastilo-tiho);
  stroke-width: 2;
}

.hero--snimak .tlo {
  display: none;
}

.kontura {
  stroke: var(--znak);
}

.konture {
  display: none;
}
.hero--zabati-nisko .konture--nisko,
.hero--zabati-visoko .konture--visoko {
  display: block;
}
.crtez .kontura {
  stroke: var(--mastilo);
}
.crtez .kontura--aktivna {
  stroke: var(--znak);
}
.crtez .kontura--priprema {
  stroke: var(--mastilo-tiho);
}

.kontura--priprema {
  stroke-dasharray: 10 8;
}

.plan__gabarit {
  stroke: var(--linija);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
.plan__oslonac {
  stroke: var(--mastilo-tiho);
  stroke-width: 1;
}

.povrsina {
  fill: var(--materijal);
}

.slika-zabat,
.slika-puna,
.pokrivac,
.hero__snimak {
  display: none;
}
.hero--slika-zabat .slika-zabat,
.hero--slika-pun .slika-puna {
  display: block;
}

.hero--snimak .hero__snimak {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--kadar-snimka);
  z-index: -1;
}

.hero--slika-pun .hero__snimak {
  object-position: 50% 50%;
}
.hero--snimak.hero--slika-zabat .pokrivac {
  display: block;
  fill: var(--ploha);
}

.zamucena,
.zamucena-veo {
  display: none;
}
.hero__mutan,
.hero__veo-mutni {
  display: none;
}

.hero--mutna-pozadina .hero__mutan,
.hero--topi .hero__mutan {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--kadar-snimka);
  filter: blur(38px);
  transform: scale(1.14);   
  z-index: -3;
}

.hero--mutna-pozadina .hero__veo-mutni,
.hero--topi .hero__veo-mutni {
  display: block;
  position: absolute;
  inset: 0;
  background: var(--ploha);
  opacity: 0.7;
  z-index: -2;
  
  -webkit-mask-image: linear-gradient(90deg, #000 0 58%, transparent 82%);
  mask-image: linear-gradient(90deg, #000 0 58%, transparent 82%);
}
.na-tamnom.hero--mutna-pozadina .hero__veo-mutni {
  opacity: 0.62;
}

.hero--topi .hero__veo-mutni {
  opacity: 0.21;
}
.na-tamnom.hero--topi .hero__veo-mutni {
  opacity: 0.18;
}

.hero--topi .hero__mutan {
  
  filter: blur(6px);
  
  opacity: 0;
}

body:has(.hero--mutna-pozadina) .zaglavlje:not(.zaglavlje--pun) {
  background: transparent;
}
body:has(.hero--mutna-pozadina) .zaglavlje:not(.zaglavlje--pun) .meni a {
  color: var(--mastilo);
}

.hero__senka-vrha {
  display: none;
}
.hero--mutna-pozadina .hero__senka-vrha {
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  height: 230px;
  z-index: -1;
  background: linear-gradient(to bottom, var(--ploha), transparent);
  opacity: 0.82;
  pointer-events: none;
}

.celije {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--p4) var(--p3);
}
.celija {
  border-top: 1px solid var(--linija);
  padding-top: var(--p2);
}
.celija__slika {
  display: block;
  width: 100%;
  
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--p2);
}
.celija__znak {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  background: var(--ploha-tiha);
  margin-bottom: var(--p2);
}
.celija__znak img {
  width: 42%;
  filter: grayscale(1);
  opacity: 0.8;
}
.celija .mesto {
  display: block;
  margin-bottom: 0.2rem;
}
.celija h3 {
  margin: 0 0 0.5rem;
}
.celija .nad {
  margin-bottom: 0.4rem;
}
.celija .osa {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
}
.celija > p:not(.nad) {
  margin: 0 0 0.4rem;
  max-width: 58ch;
}
.celija__veze {
  display: flex;
  gap: var(--p3);
  margin-top: 0.7rem;
  flex-wrap: wrap;
}

.celija__okvir {
  position: relative;
  margin-bottom: var(--p2);
}
.celija__okvir .celija__slika {
  margin-bottom: 0;
}
.osa-plocica {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--ploha);
  padding: 0.55rem 0.9rem 0.5rem;
}
.osa-plocica .osa {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}
@media (max-width: 560px) {
  .celije {
    grid-template-columns: 1fr;
  }
}

.registar__red {
  display: grid;
  grid-template-columns: minmax(90px, 150px) 1fr 220px;
  column-gap: var(--p3);
  padding: var(--p3) 0;
  border-top: 1px solid var(--linija);
}
.registar__red:first-of-type {
  border-top: 2px solid var(--mastilo);
}
.registar__telo {
  max-width: 62ch;
}
.registar__telo .mesto {
  display: block;
  margin-bottom: 0.2rem;
}
.registar__telo h3 {
  margin: 0 0 0.6rem;
}
.registar__telo .nad {
  margin-bottom: 0.5rem;
}
.registar__veze {
  display: flex;
  gap: var(--p3);
  margin-top: 0.9rem;
  flex-wrap: wrap;
}
.registar__slika {
  align-self: start;
}
.registar__slika img {
  display: block;
  width: 100%;
  height: auto;
}
.registar__slika--znak {
  align-self: center;
  display: flex;
  justify-content: center;
}
.registar__slika--znak img {
  width: 70%;
  max-width: 200px;
  filter: grayscale(1);
  opacity: 0.8;
}
@media (max-width: 820px) {
  
  .registar__red {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .registar__telo {
    display: contents;
  }
  .registar__slika {
    order: 1;
    margin-bottom: var(--p2);
  }
  .registar__slika--znak {
    display: none;
  }
  .registar__telo .nad { order: 2; }
  .registar__telo .mesto { order: 3; }
  .registar__telo h3 {
    order: 4;
    margin-bottom: 0.6rem;
  }
  .registar__levo {
    order: 5;
    margin-bottom: var(--p2);
  }
  .registar__levo .osa {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .registar__telo p {
    order: 6;
    margin: 0 0 0.4rem;
  }
  .registar__veze {
    order: 7;
    margin-top: var(--p2);
  }
}

.hero--mutna-pozadina .hero__uvod,
.hero--mutna-pozadina .nad {
  color: var(--mastilo);
}
.hero--mutna-pozadina .hero__snimak {
  z-index: -1;
}

.hero--mutna-pozadina.hero--slika-zabat .pokrivac {
  display: none;
}

.prozor-tla {
  display: none;
}
.hero--snimak .prozor-tla {
  display: block;
}
.ispod-tla {
  display: none;
  fill: var(--ploha);
}

.hero--snimak.hero--slika-zabat .povrsina {
  display: none;
}

.hero--slika-zabat .povrsina {
  display: none;
}

.veo {
  display: none;
  fill: var(--ploha);
  opacity: 0.72;
}
.hero--slika-pun .veo {
  display: block;
}
.na-tamnom .veo {
  opacity: 0.62;
}

.krov {
  stroke: var(--linija);
}
.krov--drugi {
  stroke-dashoffset: calc(var(--duz, 900) * (1 - var(--napredak, 0)));
  opacity: calc(0.25 + 0.75 * var(--napredak, 0));
}

.temelj {
  padding: 0;
}

.temelj__pravno {
  margin: 0;
  padding-block: var(--p3);
  border-bottom: 1px solid var(--linija);
  border-top: 0;
  max-width: none;
}

.cinjenice-sekcija {
  padding-bottom: clamp(1rem, 2vw, 2rem);
}

.cinjenice {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ploha-tiha);
  border-radius: var(--radijus);
  overflow: hidden;
}

.temelj__pravno {
  margin: var(--p3) 0 0;
  font-size: var(--slog-sitno);
  color: var(--mastilo-tiho);
}
.temelj .cinjenice {
  background: none;
  border-radius: 0;
}

.cinjenica {
  padding: clamp(1.7rem, 3vw, 2.5rem) clamp(1.2rem, 2vw, 1.9rem);
  border-right: 1px solid var(--linija);
}
.cinjenica:last-child {
  border-right: 0;
}

.cinjenica__broj {
  display: flex;
  align-items: flex-end;
  min-height: calc(var(--slog-1) * var(--red-display));
  color: var(--mastilo);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.6rem;
}

.cinjenica__cifra {
  display: block;
  font-size: var(--slog-1);
  font-weight: var(--debljina-glas);
  line-height: var(--red-display);
  letter-spacing: var(--zbij-1);
}

.cinjenica__cifra--rec {
  font-size: var(--slog-3);
  line-height: var(--red-3);
  letter-spacing: var(--zbij-3);
}

.cinjenica__opis {
  font-size: var(--slog-sitno);
  color: var(--mastilo-tiho);
  line-height: 1.5;
}

.stubovi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3.2rem);
}

.stub {
  padding-top: var(--p3);
  border-top: 2px solid var(--mastilo);
}

.stub__rb {
  margin-bottom: var(--p2);
}

.stub h3 {
  margin-bottom: 0.85rem;
}

.stub__dokaz {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linija);
  font-size: var(--slog-sitno);
  color: var(--mastilo);
}

.stubovi--clanovi {
  grid-template-columns: 1fr;
  gap: 0;
}
.stubovi--clanovi .stub {
  display: grid;
  grid-template-columns: minmax(90px, 150px) 1fr;
  column-gap: var(--p3);
  padding: var(--p3) 0;
  border-top: 1px solid var(--linija);
}
.stubovi--clanovi .stub:first-child {
  border-top: 2px solid var(--mastilo);
}
.stubovi--clanovi .stub__rb {
  grid-row: 1;
  font-size: var(--slog-1);
  line-height: 1;
  color: var(--mastilo-tiho);
  margin-bottom: 0;
}
.stubovi--clanovi .stub > :not(.stub__rb) {
  grid-column: 2;
  max-width: 62ch;
}
@media (max-width: 820px) {
  .stubovi--clanovi .stub {
    grid-template-columns: 1fr;
    row-gap: var(--p1);
  }
  .stubovi--clanovi .stub > :not(.stub__rb) {
    grid-column: 1;
  }
}

.kod-stanja {
  font-size: var(--slog-sitno);
  color: var(--mastilo-tiho);
  margin-bottom: var(--p3);
  max-width: 70ch;
}

.redovi {
  border-top: 1px solid var(--linija);
}

.red {
  display: grid;
  grid-template-columns: minmax(280px, 4fr) 5fr 3fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: end;                        
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--linija);  
  transition: background var(--brzo) var(--kriva);
}
.red:hover {
  background: var(--ploha-tiha);
}

.red__crtez {
  position: relative;
}
.red__crtez .crtez {
  display: block;
  width: 100%;
  height: auto;
}

.red__slika {
  display: block;
  width: 100%;
  height: auto;              
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.red__znak {
  aspect-ratio: 8 / 5;
  background: var(--ploha-tiha);
  display: grid;
  place-items: center;
  padding: var(--p4);
}

.red__znak {
  gap: var(--p1);
  text-align: center;
}
.red__partner {
  font-size: var(--slog-3);
  line-height: var(--red-3);
  letter-spacing: var(--zbij-3);
  font-weight: var(--debljina-glas);
  color: var(--mastilo);
}

.vertikala {
  display: block;
}
.vertikala__crtez {
  display: block;
  width: 100%;
  height: auto;
}
.vertikala .kontura { stroke: var(--mastilo); }
.vertikala .kontura--priprema { stroke: var(--mastilo-tiho); }
.vertikala .kontura--cilj { stroke: var(--znak); }
.vertikala .v-puna { fill: var(--materijal); }
.vertikala .v-vrata { fill: var(--znak); }       

.vertikala .zatezac { stroke: var(--mastilo-tiho); }
.vertikala .v-dimnjak { fill: var(--mastilo); }
.vertikala image { filter: saturate(0.85) contrast(0.96); }
.vertikala image[href$="zemljiste-1.jpg"] { filter: saturate(0.75) contrast(0.96); }

.vertikala .kontura--na-slici { stroke: var(--mastilo); }
.vertikala__stanice {
  list-style: none;
  margin: var(--p3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p3);
}

.vertikala--slika .vertikala__stanice {
  grid-template-columns: 25.6fr 24.9fr 23.7fr 25.8fr;
}
.vertikala__stanica {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.3rem;
}
.vertikala__stanica .stub__rb {
  margin-bottom: 0.2rem;
}
.vertikala__ime {
  font-size: var(--slog-telo);
  font-weight: var(--debljina-glas);
}
.vertikala__opis {
  font-size: var(--slog-sitno);
  color: var(--mastilo-tiho);
  max-width: 26ch;
}

.vertikala__scena {
  display: none;
}

.investitori__omot .vertikala {
  grid-column: 1 / -1;
  margin-top: var(--p3);
}
@media (max-width: 820px) {
  .vertikala__crtez {
    display: none;
  }
  .vertikala {
    display: flex;
    flex-direction: column;
  }
  .vertikala__scena {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .vertikala {
    position: relative;
    padding-left: 20px;
  }
  .vertikala::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--linija);
  }
  .vertikala__scena {
    height: 200px;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }
  .vertikala__stanice {
    display: contents;
  }
  .vertikala > svg:nth-of-type(2) { order: 1; }
  .vertikala__stanica:nth-child(1) { order: 2; }
  .vertikala > svg:nth-of-type(3) { order: 3; }
  .vertikala__stanica:nth-child(2) { order: 4; }
  .vertikala > svg:nth-of-type(4) { order: 5; }
  .vertikala__stanica:nth-child(3) { order: 6; }
  .vertikala > svg:nth-of-type(5) { order: 7; }
  .vertikala__stanica:nth-child(4) { order: 8; }
  .vertikala__stanica {
    margin-top: var(--p1);
  }
  .vertikala__stanica:not(:last-child) {
    margin-bottom: var(--p4);
  }
}

.reference {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--p4) var(--p3);
}
.referenca {
  border-top: 1px solid var(--linija);
  padding-top: var(--p2);
}
.referenca__slika {
  display: block;
  width: 100%;
  
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--p2);
}
.referenca > div {
  
  min-width: 0;
}
.referenca__ime {
  font-size: var(--slog-telo);
  font-weight: var(--debljina-glas);
  letter-spacing: var(--zbij-3);
  margin: 0 0 0.2rem;
}
.referenca__mesto {
  font-size: var(--slog-sitno);
  color: var(--mastilo-tiho);
  margin: 0 0 0.6rem;
}
.reference__poziv {
  border-top: 1px solid var(--linija);
  margin-top: var(--p4);
  padding-top: var(--p3);
  color: var(--mastilo-tiho);
  max-width: 72ch;
}
.reference__poziv a {
  margin-left: 0.8rem;
  white-space: nowrap;
}
@media (max-width: 700px) {
  
  .reference {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .referenca {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--p2);
    align-items: center;
    padding: var(--p2) 0;
  }
  .referenca__slika {
    margin: 0;
  }
}

.dokaz {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--p3) var(--p5);
  align-items: center;
  background: var(--ploha-tiha);
  border-radius: var(--radijus);
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  margin-bottom: var(--p4);
}
.dokaz__opis {
  max-width: 62ch;
  color: var(--mastilo-tiho);
  margin-top: 0.6rem;
}
.dokaz__desno {
  display: grid;
  gap: var(--p2);
  justify-items: start;
}
@media (max-width: 820px) {
  .dokaz {
    grid-template-columns: 1fr;
  }
}

.red__ime {
  margin-block: 0.4rem 0.6rem;
}

.red__opis {
  max-width: 46ch;
}

.red__desno {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}

.osa {
  display: inline-grid;
  gap: var(--p1);
}

.osa__zarezi {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 34px;
  padding-bottom: 1px;
}
.osa__zarezi::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--linija);
}

.osa__zarez {
  position: relative;
  width: 1px;
  height: 14px;
  background: var(--linija);
}

.osa__zarez--proslo {
  background: var(--mastilo-tiho);
}

.osa__zarez--sad {
  width: 2px;
  height: 24px;
  background: var(--znak);
}

.osa__ime {
  font-size: var(--slog-znak);
  font-weight: var(--debljina-glas);
  letter-spacing: var(--razmak-znak);
  text-transform: uppercase;
  color: var(--mastilo);
}

.projekti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--p3);
}

.projekat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linija);
  border-radius: var(--radijus);
  background: var(--ploha);
  overflow: hidden;
  transition: border-color var(--brzo) var(--kriva), transform var(--brzo) var(--kriva),
    box-shadow var(--brzo) var(--kriva);
}
.projekat:hover {
  border-color: var(--mastilo-tiho);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(16, 16, 16, 0.07);
}

.projekat__polje {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ploha-tiha);
  border-bottom: 1px solid var(--linija);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: var(--p3);
}
.projekat__polje:has(img) .polje-crtez {
  display: none;
}
.projekat__polje img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.polje-crtez {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.projekat__polje > *:not(.polje-crtez) {
  position: relative;
  z-index: 1;
}
.polje-crtez .materijal {
  filter: grayscale(1) contrast(1.05) brightness(1.02);
  opacity: 0.85;
}

.projekat__stanje {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  background: var(--ploha);
}

.projekat__telo {
  padding: var(--p3) var(--p3) 1.7rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
}

.projekat__ime {
  font-size: var(--slog-3);
  line-height: var(--red-3);
  letter-spacing: var(--zbij-3);
  font-weight: var(--debljina-glas);
  order: -1;
  margin-bottom: 0.1rem;
}

.projekat__veze {
  margin-top: auto;
  padding-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

body.bez-slika .projekat__polje {
  background-image: none;
}

.investitori {
  background: var(--ploha-tiha);
}

.investitori__traka {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--p2) var(--p4);
  align-items: center;
}
.investitori__traka h2 {
  margin: 0;
  max-width: 15ch;
}
.investitori__sazetak {
  max-width: 52ch;
  color: var(--mastilo);
}
@media (max-width: 820px) {
  .investitori__traka {
    grid-template-columns: 1fr;
  }
}

.investitori__omot,
.dvokolone {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.investitori h2,
.dvokolone h2 {
  margin-top: var(--p2);
}

.investitori p + p,
.dvokolone p + p {
  margin-top: 1.1rem;
}

.investitori .dugmad {
  margin-top: var(--p4);
}

.poziv {
  background: var(--ploha-tiha);
}
.poziv__polje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--p4);
}
.poziv p {
  margin-top: 0.9rem;
  max-width: 52ch;
}

.podnozje {
  border-top: 1px solid var(--linija);
  padding-block: clamp(3.5rem, 6vw, 5rem) var(--p4);
}

.podnozje__vrh {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: var(--p4); 
}

.podnozje h3 {
  margin-bottom: var(--p2);
}

.podnozje ul {
  display: grid;
  gap: 0.7rem;
  font-size: var(--slog-sitno);
  color: var(--mastilo-tiho);
}
.podnozje ul a {
  transition: color var(--brzo) var(--kriva);
}
.podnozje ul a:hover {
  color: var(--mastilo);
}

.podnozje__pravno {
  font-size: var(--slog-sitno);
  line-height: 1.75;
}

.podnozje__mreze {
  display: flex;
  gap: 0.9rem;
  margin-top: 0.4rem;
}
.podnozje__mreze a {
  display: inline-flex;
  color: var(--mastilo-tiho);
  transition: color var(--brzo) var(--kriva);
}
.podnozje__mreze a:hover {
  color: var(--mastilo);
}
.podnozje__mreze svg {
  width: 20px;
  height: 20px;
}

.podnozje__brava {
  padding-bottom: 2.75rem;
}
.podnozje__brava img {
  width: 100%;
  max-width: 280px; 
  height: auto;
}

.podnozje__dno {
  border-top: 1px solid var(--linija);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--p2);
  font-size: var(--slog-sitno);
  color: var(--mastilo-tiho);
}
.podnozje__dno a {
  transition: color var(--brzo) var(--kriva);
}
.podnozje__dno a:hover {
  color: var(--mastilo);
}

.putanja {
  padding-block: var(--p3) 0;
  font-size: var(--slog-sitno);
  color: var(--mastilo-tiho);
}
.putanja ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p1);
  list-style: none;
  padding: 0;
}
.putanja li + li::before {
  content: '/';
  margin-right: var(--p1);
  color: var(--linija);
}
.putanja a:hover {
  color: var(--mastilo);
}
.putanja [aria-current] {
  color: var(--mastilo);
  font-weight: var(--debljina-glas);
}

.pr-glava {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 4vw, 3.5rem);
}
.pr-glava__red {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: var(--p3);
}
.pr-glava h1 {
  max-width: 18ch;
}
.pr-glava__uvod {
  max-width: 56ch;
  margin-top: var(--p3);
}
.pr-glava .dugmad {
  margin-top: var(--p4);
}

.podaci {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ploha-tiha);
  border-radius: var(--radijus);
  overflow: hidden;
}

.podatak {
  padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.1rem, 2vw, 1.7rem);
  border-right: 1px solid var(--linija);
}
.podatak:last-child {
  border-right: 0;
}

.podatak__ime {
  margin-bottom: 0.6rem;
}

.podatak__vrednost {
  font-size: var(--slog-3);
  line-height: var(--red-3);
  letter-spacing: var(--zbij-3);
  font-weight: var(--debljina-glas);
  color: var(--mastilo);
}

.spisak {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem var(--p4);
  margin-top: var(--p4);
}
.spisak li {
  padding-left: var(--p3);
  position: relative;
  color: var(--mastilo);
}
.spisak li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 2px;
  background: var(--znak);
}

.spisak li:has(> .ceka) {
  padding-left: 0;
}
.spisak li:has(> .ceka)::before {
  display: none;
}

.polja {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--p3);
}
.polja--dva {
  grid-template-columns: repeat(2, 1fr);
}

.polje {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linija);
  border-radius: var(--radijus);
  background: var(--ploha-tiha);
  background-image: repeating-linear-gradient(
    calc(-1 * var(--krov)),
    transparent 0 11px,
    rgba(16, 16, 16, 0.045) 11px 12px
  );
  display: flex;
  align-items: flex-end;
  padding: 1.3rem;
}
.polje--siroko {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 9;
}
.polje__opis {
  font-size: var(--slog-sitno);
  font-weight: var(--debljina-glas);
  color: var(--mastilo-tiho);
}

.polje__slika {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.polje:has(.polje__slika) {
  overflow: hidden;
}
.polje:has(.polje__slika) .polje__opis {
  position: relative;
  color: var(--mastilo);
  background: var(--ploha);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radijus-malo);
}

.uskoro {
  border: 1px solid var(--linija);
  border-radius: var(--radijus);
  padding: clamp(2.2rem, 5vw, 4rem);
  background: var(--ploha-tiha);
}
.uskoro h2 {
  margin-bottom: 1.1rem;
}
.uskoro p {
  max-width: 54ch;
}

.forma {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: var(--p4);
  max-width: 560px;
}
.forma input {
  flex: 1 1 260px;
  font-family: var(--pismo);
  font-size: var(--slog-telo);
  color: var(--mastilo);
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--linija);
  border-radius: var(--radijus);
  background: var(--ploha);
}
.forma input::placeholder {
  color: var(--mastilo-tiho);
}
.forma input:focus-visible {
  border-color: var(--mastilo);
}
.forma__napomena {
  font-size: var(--slog-sitno);
  margin-top: 0.9rem;
}

.ostali {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--p3);
}
.ostali--tri {
  grid-template-columns: repeat(3, 1fr);
}
.ostali__stavka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   
  gap: 0.6rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--linija);
  border-radius: var(--radijus);
  transition: border-color var(--brzo) var(--kriva), transform var(--brzo) var(--kriva),
    box-shadow var(--brzo) var(--kriva);
}
.ostali__stavka:hover {
  border-color: var(--mastilo-tiho);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(16, 16, 16, 0.07);
}
.ostali__vise {
  margin-top: 0.6rem;
}

.vesti {
  display: grid;
  border-top: 1px solid var(--linija);
}

.vest {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--linija);
}
.vest__ime {
  margin-bottom: 0.6rem;
}

.vesti__vise {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--p3);
}

.kontakt-mreza {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.obrazac {
  display: grid;
  gap: 1.3rem;
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  border: 1px solid var(--linija);
  border-radius: var(--radijus);
}
.obrazac .dug {
  justify-self: start;
}

.polje-forme {
  display: grid;
  gap: var(--p1);
}
.polje-forme__uz {
  font-weight: var(--debljina-slog);
  letter-spacing: var(--razmak-sitno);
  text-transform: none;
}
.polje-forme input,
.polje-forme textarea {
  font-family: var(--pismo);
  font-size: var(--slog-telo);
  color: var(--mastilo);
  padding: 0.85rem 1.05rem;
  border: 1px solid var(--linija);
  border-radius: var(--radijus-malo);
  background: var(--ploha);
  width: 100%;
  resize: vertical;
}
.polje-forme input:focus-visible,
.polje-forme textarea:focus-visible {
  border-color: var(--mastilo);
}

.kontakt-panel {
  display: grid;
  gap: clamp(1.5rem, 2.6vw, 2rem);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  background: var(--ploha-tiha);
  border-radius: var(--radijus);
}

.kontakt-blok + .kontakt-blok {
  border-top: 1px solid var(--linija);
  padding-top: clamp(1.5rem, 2.6vw, 2rem);
}
.kontakt-blok h2 {
  margin-bottom: 0.8rem;
}
.kontakt-blok p {
  color: var(--mastilo);
}

.kontakt-adresa {
  line-height: 1.7;
}

.kontakt-veze {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
}
@media (max-width: 820px) {}

@media (max-width: 980px) {
  .cinjenice {
    grid-template-columns: repeat(2, 1fr);
  }
  .cinjenica:nth-child(2) {
    border-right: 0;
  }
  .cinjenica:nth-child(3),
  .cinjenica:nth-child(4) {
    border-top: 1px solid var(--linija);
  }
  .stubovi,
  .projekti,
  .investitori__omot,
  .podnozje__vrh,
  .dvokolone,
  .polja,
  .polja--dva,
  .ostali,
  .ostali--tri,
  .kontakt-mreza {
    grid-template-columns: 1fr;
  }
  .red {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .red__crtez {
    max-width: 400px;
  }
  .podaci {
    grid-template-columns: repeat(2, 1fr);
  }
  .podatak:nth-child(2) {
    border-right: 0;
  }
  .podatak:nth-child(3),
  .podatak:nth-child(4) {
    border-top: 1px solid var(--linija);
  }
  .polje--siroko {
    aspect-ratio: 4 / 3;
  }
  .vest {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

.hero__slog .dug--obris {
  background: var(--ploha);
}

@media (max-height: 760px) {
  .hero__stalak {
    align-items: flex-start;
    padding-top: calc(var(--visina-zaglavlja) + var(--p3));
  }
  .hero__uvod {
    margin-bottom: var(--p2);
  }
  .hero__slog .nad {
    margin-bottom: var(--p2);
  }
}
@media (max-height: 760px) {
  
  .hero__uvod {
    font-size: var(--slog-telo);
  }
}

@media (max-width: 820px) {
  
  .hero__stalak .naselje {
    inset: auto 0 0 0;
  }

  
  .zaglavlje,
  body:has(.hero__stalak) .zaglavlje {
    background: var(--ploha);
    border-bottom-color: var(--linija);
  }

  
  .hero__stalak .naselje {
    height: 54vh;
  }

  
  .hero--mutna-pozadina .hero__mutan,
  .hero--mutna-pozadina .hero__veo-mutni,
  .hero--mutna-pozadina .hero__senka-vrha {
    display: none;
  }
  
  .hero--topi.hero--slika-zabat .pokrivac {
    display: none;
  }
  .hero--mutna-pozadina.hero--slika-zabat .pokrivac {
    display: block;
  }
  .hero--mutna-pozadina .hero__snimak {
    clip-path: none !important;
  }
  body:has(.hero--mutna-pozadina) .zaglavlje:not(.zaglavlje--pun) {
    background: var(--ploha);
  }
  .hero--mutna-pozadina .hero__uvod,
  .hero--mutna-pozadina .nad {
    color: var(--mastilo-tiho);
  }
  .burger {
    display: block;
  }
  .meni {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ploha);
    padding: var(--p1) var(--zid) var(--p3);
    
    min-height: calc(100dvh - var(--visina-zaglavlja));
    overflow-y: auto;
  }
  .meni.otvoren {
    display: flex;
  }
  .meni a {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--linija);
    font-size: var(--slog-telo);
  }
  
  .meni > a:not(.dug) {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    
    font-size: 1.125rem;
    padding-block: 1rem;
  }
  .meni a.dug--glavno {
    padding-block: 1rem;
  }
  .meni .dug {
    margin-top: 1.1rem;
    border-bottom: 0;
  }
  
  .jezik {
    border-bottom: 1px solid var(--linija);
    gap: 1.4rem;
  }
  .meni .jezik a {
    border-bottom: 0;
  }
  
  .meni a.dug--glavno {
    justify-content: center;
    background: none;
    border: 1px solid var(--mastilo);
    color: var(--mastilo);
  }
  .meni a.dug--glavno::before {
    background: var(--ploha-tiha);
  }
}

@media (max-width: 560px) {
  .spisak,
  .podaci {
    grid-template-columns: 1fr;
  }
  .podatak {
    border-right: 0;
  }
  .podatak + .podatak {
    border-top: 1px solid var(--linija);
  }
  .brava img {
    height: 34px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  
  .naselje__tlo {
    transform: scaleX(0);
    transform-origin: left center;
    animation: izvuci var(--sporo) var(--kriva) var(--korak) forwards;
  }
  .hero .tlo {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    animation: crtaj var(--sporo) var(--kriva) var(--korak) forwards;
  }

  
  .hero--ulaz .kontura {
    stroke-dasharray: var(--duz, 900);
    stroke-dashoffset: var(--duz, 900);
    animation: crtaj var(--sporo) var(--kriva) forwards;
    animation-delay: calc(var(--korak) + var(--kasni, 0s));
  }
  .hero--ulaz .maska-zabat {
    transform: translateY(101%);
    transform-box: fill-box;
    animation: izlij var(--sporo) var(--kriva) forwards;
    animation-delay: calc(4 * var(--korak) + var(--kasni, 0s));
  }
  .hero--ulaz .preliv {
    animation: prelij-slovo var(--sporo) var(--kriva) calc(5 * var(--korak)) both;
  }

  
  .hero--skrol .tlo {
    animation: none;
    stroke-dashoffset: calc(1600 * (1 - var(--p-tlo, 0)));
  }
  .hero--skrol .kontura {
    stroke-dasharray: var(--duz, 900);
    animation: none;
  }
  .hero--skrol .kontura--1 {
    stroke-dashoffset: calc(var(--duz) * (1 - var(--p-k1, 0)));
  }
  .hero--skrol .kontura--2 {
    stroke-dashoffset: calc(var(--duz) * (1 - var(--p-k2, 0)));
  }
  .hero--skrol .kontura--3 {
    stroke-dashoffset: calc(var(--duz) * (1 - var(--p-k3, 0)));
  }
  .hero--skrol .maska-zabat {
    transform-box: fill-box;
    transform: translateY(calc(101% * (1 - var(--p-povrsina, 0))));
    animation: none;
  }
  .hero--skrol .preliv {
    background-position: calc(var(--p-naslov, 0) * 100%) 0;
    animation: none;
  }

  .krov--prvi {
    stroke-dasharray: var(--duz, 900);
    stroke-dashoffset: var(--duz, 900);
    animation: crtaj var(--sporo) var(--kriva) var(--kasni, 0.5s) forwards;
  }
  .krov--drugi {
    stroke-dasharray: var(--duz, 900);
  }

  

  
  .polje-crtez .maska-zabat,
  .red__crtez .maska-zabat {
    transform: translateY(101%);
    transform-box: fill-box;
  }
  .polje-crtez .tlo,
  .polje-crtez .kontura,
  .red__crtez .kontura {
    stroke-dasharray: var(--duz, 400);
    stroke-dashoffset: var(--duz, 400);
  }
  .polje-crtez .tlo {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
  }
  .vertikala .tlo {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
  }
  .vertikala .kontura:not(.kontura--priprema) {
    stroke-dasharray: var(--duz, 400);
    stroke-dashoffset: var(--duz, 400);
  }

  .vidljivo .tlo {
    animation: crtaj var(--sporo) var(--kriva) both;
  }
  .vidljivo .kontura {
    animation: crtaj var(--sporo) var(--kriva) both;
    animation-delay: calc(var(--korak) + var(--kasni, 0s));
  }
  .vidljivo .maska-zabat {
    animation: izlij var(--sporo) var(--kriva) both;
    animation-delay: calc(5 * var(--korak) + var(--kasni, 0s));
  }
  
  .red__crtez .kontura--priprema,
  .polje-crtez .kontura--priprema,
  .kontura--priprema {
    stroke-dasharray: 10 8;
    stroke-dashoffset: 0;
    opacity: 0;
    animation: none;
  }
  .vidljivo .kontura--priprema {
    animation: pojavi var(--sporo) var(--kriva) both;
    animation-delay: calc(var(--korak) + var(--kasni, 0s));
  }
  
  .vertikala .v-dimnjak {
    opacity: 0;
  }
  .vidljivo .v-dimnjak {
    animation: pojavi var(--sporo) var(--kriva) both;
    animation-delay: calc(7 * var(--korak));
  }
}

@keyframes crtaj {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes izvuci {
  to {
    transform: scaleX(1);
  }
}
@keyframes izrasti {
  to {
    transform: scaleY(1);
  }
}
@keyframes izlij {
  from {
    transform: translateY(101%);
  }
  to {
    transform: none;
  }
}
@keyframes prelij-slovo {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
@keyframes pojavi {
  to {
    opacity: 1;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  
  .meni.otvoren > * {
    opacity: 0;
    animation: uklizi var(--sporo) var(--kriva) both;
  }
  .meni.otvoren > *:nth-child(1) { animation-delay: 0.03s; }
  .meni.otvoren > *:nth-child(2) { animation-delay: 0.07s; }
  .meni.otvoren > *:nth-child(3) { animation-delay: 0.11s; }
  .meni.otvoren > *:nth-child(4) { animation-delay: 0.15s; }
  .meni.otvoren > *:nth-child(5) { animation-delay: 0.19s; }
  .meni.otvoren > *:nth-child(6) { animation-delay: 0.23s; }
  .meni.otvoren > *:nth-child(7) { animation-delay: 0.27s; }

}
@keyframes uklizi {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 820px) {
  .vertikala__scena.vidljivo .kontura,
  .vertikala__scena.vidljivo .tlo {
    animation-duration: 1.2s;
  }
}

.zgrada-isecak {
  margin: var(--p3) 0 0;
}
.zgrada-isecak svg {
  display: block;
  width: 100%;
  height: auto;
}
.zgrada-isecak .zgrada-tlo {
  stroke: var(--mastilo-tiho);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.zgrada-isecak .zgrada-obris {
  fill: none;
  stroke: var(--mastilo);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.zgrada-isecak figcaption {
  font-size: var(--slog-sitno);
  color: var(--mastilo-tiho);
  margin-top: 0.6rem;
}

.vest--slika {
  grid-template-columns: 190px minmax(0, 1fr) 260px;
  align-items: start;
}
.vest__slika {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.vest__veza {
  margin-top: 0.6rem;
}
@media (max-width: 820px) {
  .vest--slika {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .vest--slika .vest__slika {
    order: -1;
    margin-bottom: 0.4rem;
  }
}

.dug--vece {
  font-size: var(--slog-telo);
  padding: 1.05rem 2.2rem;
}

.dug--glavno,
.meni a.dug--glavno {
  
  color: #ffffff;
}

a.dug:not([href]) {
  pointer-events: none;
  cursor: default;
}
a.red__vise:not([href]) {
  pointer-events: none;
  cursor: default;
  color: var(--mastilo-tiho);
  box-shadow: none;
}

.zakljucano,
.meni a.zakljucano,
.podnozje ul a.zakljucano {
  color: var(--mastilo-tiho);
  pointer-events: none;
  cursor: default;
}

@media (max-width: 820px) {
  .dug--vece {
    font-size: var(--slog-sitno);
    padding: 0.6rem 1.25rem;
  }
  .meni a.dug--glavno {
    color: var(--mastilo);
    font-size: var(--slog-sitno);
    padding-block: 0.7rem;
  }
}

.sekcija--ploha {
  background: var(--ploha-tiha);
  border-top: 0;
}