/* base */
:root {
  --ugljen: #1b1d1f;
  --ugljen-meki: #2a2e31;
  --narancasta: #ff7a1a;
  --narancasta-tamna: #b64c00;
  --celik: #e9edf0;
  --celik-tamni: #c9d1d7;
  --bijela: #fbfcfc;
  --upozorenje: #ffd9bd;
  --zabrana: #8a1f0f;
  --f-naslov: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  --f-tekst: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  --kocke-tamne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg stroke='%23ff7a1a' stroke-opacity='.3' stroke-width='1'%3E%3Cpath fill='%232b2f33' d='M30 0l30 17.3-30 17.3L0 17.3zM0 52l30 17.3L0 86.6l-30-17.3zM60 52l30 17.3-30 17.3-30-17.3z'/%3E%3Cpath fill='%23131516' d='M0 17.3l30 17.3v34.7L0 52zM-30 69.3L0 86.6v34.7L-30 104zM30 69.3l30 17.3v34.7L30 104zM-30-34.7L0-17.4v34.7L-30 0zM30-34.7l30 17.3v34.7L30 0z'/%3E%3Cpath fill='%231f2225' d='M60 17.3L30 34.6v34.7L60 52zM30 69.3L0 86.6v34.7L30 104zM90 69.3L60 86.6v34.7L90 104zM30-34.7L0-17.4v34.7L30 0zM90-34.7L60-17.4v34.7L90 0z'/%3E%3C/g%3E%3C/svg%3E");
  --kocke-svijetle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg stroke='%231b1d1f' stroke-opacity='.07' stroke-width='1'%3E%3Cpath fill='%23f6f8f9' d='M30 0l30 17.3-30 17.3L0 17.3zM0 52l30 17.3L0 86.6l-30-17.3zM60 52l30 17.3-30 17.3-30-17.3z'/%3E%3Cpath fill='%23d6dde2' d='M0 17.3l30 17.3v34.7L0 52zM-30 69.3L0 86.6v34.7L-30 104zM30 69.3l30 17.3v34.7L30 104zM-30-34.7L0-17.4v34.7L-30 0zM30-34.7l30 17.3v34.7L30 0z'/%3E%3Cpath fill='%23e3e8ec' d='M60 17.3L30 34.6v34.7L60 52zM30 69.3L0 86.6v34.7L30 104zM90 69.3L60 86.6v34.7L90 104zM30-34.7L0-17.4v34.7L30 0zM90-34.7L60-17.4v34.7L90 0z'/%3E%3C/g%3E%3C/svg%3E");
}

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

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

body {
  margin: 0;
  font-family: var(--f-tekst);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ugljen);
  background-color: var(--celik);
  background-image: var(--kocke-svijetle);
  background-size: 44px 76px;
}

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

h1, h2, h3 {
  font-family: var(--f-naslov);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 .6em;
  letter-spacing: -.005em;
}
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.5rem, 2.2vw, 1.75rem); }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--narancasta-tamna); text-underline-offset: .18em; text-decoration-thickness: 2px; transition: color .2s; }
a:hover { color: var(--ugljen); }
a:active { color: var(--zabrana); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--narancasta);
  outline-offset: 3px;
}
ul, ol { padding-left: 1.2em; }

.preskok01 {
  position: absolute; left: 8px; top: -80px; z-index: 200;
  background: var(--narancasta); color: var(--ugljen);
  padding: .6em 1em; font-weight: 700; border-radius: 2px;
}
.preskok01:focus { top: 8px; color: var(--ugljen); }

.skriveno01 {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.okvir01 { width: min(100% - 2.5rem, 1240px); margin-inline: auto; }
.okvir02 { width: min(100% - 2.5rem, 860px); margin-inline: auto; }

/* navigation */
.zaglavlje01 {
  position: sticky; top: 0; z-index: 100;
  background: var(--ugljen);
  border-bottom: 4px solid var(--narancasta);
  color: var(--celik);
}
.zaglavlje03 {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 76px; padding: .3rem 1.25rem;
  transition: min-height .25s;
}
.znak01 {
  display: inline-flex; align-items: center; gap: .8rem;
  color: var(--celik); text-decoration: none; min-width: 0;
}
.znak01:hover { color: var(--narancasta); }
.znak02 {
  width: 62px; height: 62px; flex: none;
  background: var(--narancasta);
  border: 2px solid var(--celik);
  border-radius: 2px;
  object-fit: cover;
  transition: transform .25s, border-radius .25s;
  transform-origin: left center;
}
.znak03 {
  font-family: var(--f-naslov); font-weight: 700; font-size: 1.5rem; line-height: 1;
  transition: opacity .2s;
}
.zaglavlje02 .zaglavlje03 { min-height: 60px; }
.zaglavlje02 .znak02 { transform: scale(.65); border-radius: 50%; }
.zaglavlje02 .znak03 { opacity: 0; width: 0; overflow: hidden; }

.izbornik01 { display: flex; align-items: center; gap: .4rem; }
.izbornik02, .izbornik08 { list-style: none; display: flex; gap: .2rem; margin: 0; padding: 0; }
.izbornik03 {
  position: relative; display: block; overflow: hidden;
  padding: .55rem .8rem .7rem;
  font-size: 1.2rem; font-weight: 600;
  color: var(--celik); text-decoration: none;
}
.izbornik03::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 0;
  height: 6px; background: var(--narancasta);
  transform: translateY(8px); transition: transform .22s ease-out;
}
.izbornik03:hover { color: var(--bijela); }
.izbornik03:hover::after, .izbornik04::after { transform: translateY(0); }
.izbornik03:active { color: var(--narancasta); }
.izbornik06 {
  display: none;
  font: 700 1rem var(--f-tekst);
  color: var(--ugljen); background: var(--narancasta);
  border: 2px solid var(--narancasta); border-radius: 2px;
  padding: .5rem .9rem; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.izbornik06:hover { background: var(--celik); border-color: var(--celik); }
.izbornik06:active { transform: translateY(1px); }

.zaglavlje02 .izbornik03 { font-size: 1.05rem; }
.zaglavlje02 .izbornik06 { display: inline-block; }
.zaglavlje02 .izbornik08 {
  display: none; position: absolute; right: 1.25rem; top: 100%;
  flex-direction: column; min-width: 15rem;
  background: var(--ugljen); border: 2px solid var(--narancasta); border-top: 0;
  padding: .4rem;
}
.zaglavlje02 .izbornik07 .izbornik08 { display: flex; }

/* buttons */
.gumb01 {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-block;
  font: 700 1.1rem var(--f-tekst);
  color: var(--ugljen); background: var(--narancasta);
  border: 2px solid var(--ugljen); border-radius: 2px;
  padding: .85rem 1.6rem; cursor: pointer; text-decoration: none;
  box-shadow: 5px 5px 0 var(--ugljen);
  transition: color .25s, box-shadow .15s, transform .15s;
}
.gumb01::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ugljen);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s ease-out;
}
.gumb01:hover { color: var(--bijela); }
.gumb01:hover::before { transform: scaleX(1); }
.gumb01:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ugljen); }
.gumb01[disabled] { opacity: .6; cursor: progress; }
.gumb03 { box-shadow: 5px 5px 0 var(--narancasta-tamna); border-color: var(--celik); }
.gumb03::before { background: var(--celik); }
.gumb03:hover { color: var(--ugljen); }
.gumb02 { font-weight: 700; }

/* hero */
.uvod01 {
  position: relative;
  background-color: var(--ugljen);
  background-image: var(--kocke-tamne);
  background-size: 120px 208px;
  color: var(--celik);
  padding: clamp(1.6rem, 4vw, 3.2rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}
.uvod02 {
  display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
}
.uvod03, .uvod04 { min-width: 0; }
.uvod04 { position: sticky; top: 96px; }
.naslov01 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  margin-bottom: .35em; color: var(--bijela);
  text-wrap: balance;
}
.uvod05 {
  font-size: 1.2rem; max-width: 46ch;
  background: rgba(27, 29, 31, .86); padding: .5rem .7rem; margin-left: -.7rem;
}
.uvod06 {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4rem;
  align-items: start; margin-top: 1.4rem;
}
.uvod07 {
  background: var(--celik); color: var(--ugljen);
  border: 2px solid var(--narancasta); border-radius: 2px;
  padding: 1.1rem 1.1rem 1.2rem; min-width: 0;
}
.uvod08 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.uvod09 { margin: 0; padding: 0; border: 0; min-width: 0; }
.uvod10 { font-weight: 700; font-size: 1.1rem; padding: 0; margin-bottom: .6rem; }
.uvod11 { margin-top: 1.4rem; }

/* fields */
.polje01 { display: flex; flex-direction: column; gap: .25rem; min-width: 0; margin-bottom: .8rem; }
.polje03 { font-weight: 600; font-size: .98rem; }
.polje02 {
  width: 100%; min-width: 0;
  font: 400 1.05rem var(--f-tekst); color: var(--ugljen);
  background: var(--bijela);
  border: 2px solid var(--ugljen); border-radius: 2px;
  padding: .6rem .7rem;
  transition: border-color .15s, box-shadow .15s;
}
.polje02:hover { border-color: var(--narancasta-tamna); }
.polje02:focus { box-shadow: 4px 4px 0 var(--narancasta); }
.polje06 { font-family: var(--f-naslov); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.polje04 { color: var(--zabrana); font-size: .92rem; font-weight: 600; min-height: 0; }
.polje05 .polje02 { border-color: var(--zabrana); background: #fff3ee; }
.polje07 { display: flex; gap: .6rem; align-items: flex-start; font-size: .96rem; }
.polje07 input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex: none; accent-color: var(--narancasta-tamna); }

/* stats */
.brojka01 { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.brojka02 {
  border: 4px solid var(--narancasta); border-radius: 2px;
  background: var(--ugljen); padding: .3rem 1rem .6rem; min-width: 9.5rem;
}
.brojka03 {
  display: block;
  font-family: var(--f-naslov); font-weight: 700;
  font-size: clamp(3.4rem, 5vw, 4.4rem); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--bijela);
}
.brojka04 { display: block; font-size: .98rem; color: var(--celik); }

/* scheme */
.shema01 {
  background: var(--celik); color: var(--ugljen);
  border: 2px solid var(--ugljen); border-radius: 2px;
  box-shadow: 10px 10px 0 var(--narancasta);
  padding: 1rem 1rem 1.1rem;
}
.shema02 { width: 100%; height: auto; display: block; }
.shema03 { fill: #cfd6db; stroke: var(--ugljen); stroke-width: 1.5; }
.shema04 { fill: none; stroke: var(--ugljen); stroke-width: 2; stroke-linejoin: round; }
.shema05 { fill: none; stroke: var(--ugljen); stroke-width: 1.2; stroke-dasharray: 5 4; }
.shema06 { fill: #ff9a4d; stroke: var(--ugljen); stroke-width: 1.5; stroke-linejoin: round; }
.shema07 { fill: #ff7a1a; stroke: var(--ugljen); stroke-width: 1.5; stroke-linejoin: round; }
.shema08 { fill: #d85f08; stroke: var(--ugljen); stroke-width: 1.5; stroke-linejoin: round; }
.ishod03 .shema06 { fill: #c96a5c; }
.ishod03 .shema07 { fill: #a8402f; }
.ishod03 .shema08 { fill: #8a1f0f; }
.shema09 { font: 600 11px var(--f-tekst); fill: var(--ugljen); }
.shema10 {
  margin: .8rem 0 0; padding: .7rem .8rem;
  border-left: 8px solid var(--ugljen); background: var(--bijela);
  font-size: 1rem; min-height: 5.2em;
}
.shema10 strong { font-family: var(--f-naslov); font-size: 1.5rem; display: block; line-height: 1.15; }
.ishod01 .shema10 { border-left-color: #1f6b3a; }
.ishod02 .shema10 { border-left-color: var(--narancasta); background: var(--upozorenje); }
.ishod03 .shema10 { border-left-color: var(--zabrana); background: #f6d9d3; }
.shema11 { font-size: .92rem; margin: .6rem 0 0; }

/* images */
.slika01 {
  position: relative; margin: 0;
  border: 2px solid var(--ugljen); border-radius: 0;
  background: var(--narancasta); overflow: hidden;
}
.slika01 img {
  width: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: multiply;
}
.slika01::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--ugljen); mix-blend-mode: lighten; opacity: .9;
}
.slika01.uvod11 { border-color: var(--celik); }
.slika02 img { aspect-ratio: 16 / 9; }
.slika03 img { aspect-ratio: 4 / 3; }
.slika04 img { aspect-ratio: 9 / 16; }
.slika05 img { aspect-ratio: 1 / 1; }

/* dividers */
.traka01 {
  height: 14px;
  background: repeating-linear-gradient(-60deg, var(--narancasta) 0 22px, var(--ugljen) 22px 44px);
}
.traka02 { height: 8px; background: var(--narancasta); }

/* limits */
.granica01 {
  position: relative; overflow: hidden;
  background: var(--ugljen); color: var(--celik);
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
}
.granica02 {
  position: absolute; right: -4%; top: 6%; width: min(46vw, 620px); height: auto;
  pointer-events: none; z-index: 0;
}
.granica03 { position: relative; z-index: 1; }
.granica03 h2 { color: var(--bijela); max-width: 18ch; }
.granica04 {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0;
  margin-top: 1.1rem; border: 2px solid var(--celik); background: var(--ugljen-meki);
  transition: transform .25s, box-shadow .25s;
}
.granica04:hover { transform: translateY(-5px); box-shadow: 0 14px 0 -4px var(--narancasta); }
.granica05 {
  background: var(--narancasta); color: var(--ugljen);
  padding: 1rem 1.25rem; min-width: 0;
  transition: background-color .25s;
}
.granica04:hover .granica05 { background: var(--celik); }
.granica05 h3 { margin: 0; }
.granica06 {
  font-family: var(--f-naslov); font-weight: 700; font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1; font-variant-numeric: tabular-nums; display: block;
}
.granica07 { padding: 1rem 1.25rem; min-width: 0; }
.granica07 p:last-child, .granica07 ul:last-child { margin-bottom: 0; }
.granica08 { margin-left: clamp(0rem, 6vw, 5rem); }
.granica09 { margin-left: clamp(0rem, 12vw, 10rem); }

/* exits */
.izlaz01 { padding: clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 9vw, 8rem); }
.izlaz02 { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.izlaz03 { position: sticky; top: 96px; min-width: 0; }
.izlaz03 h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.izlaz04 { list-style: none; margin: 0; padding: 0; counter-reset: izlaz; min-width: 0; }
.izlaz05 {
  background: var(--bijela); border: 2px solid var(--ugljen);
  border-left: 14px solid var(--narancasta);
  padding: 1rem 1.2rem; margin-bottom: .9rem;
}
.izlaz05 h3 { margin-bottom: .3em; }
.izlaz06 { border-left-color: var(--ugljen); background: var(--upozorenje); }
.izlaz07 { font-weight: 600; margin: 0; }

/* services */
.usluga01 { background: var(--bijela); border-block: 2px solid var(--ugljen); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.usluga01 h2 { text-align: center; margin-inline: auto; max-width: 22ch; }
.usluga02 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.8rem; }
.usluga03 {
  grid-column: span 2; min-width: 0; display: flex; flex-direction: column;
  background: var(--celik); border: 2px solid var(--ugljen); border-radius: 2px;
  transition: transform .25s, box-shadow .25s;
}
.usluga03:hover { transform: translateY(-6px); box-shadow: 8px 12px 0 var(--ugljen); }
.usluga04 { grid-column: span 3; }
.usluga05 {
  background: var(--ugljen); color: var(--bijela);
  padding: .8rem 1rem; transition: background-color .25s, color .25s;
}
.usluga03:hover .usluga05 { background: var(--narancasta); color: var(--ugljen); }
.usluga05 h3 { margin: 0; }
.usluga06 { padding: 1rem; flex: 1; }
.usluga07 {
  list-style: none; margin: 0; padding: .7rem 1rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  border-top: 2px solid var(--ugljen); background: var(--bijela);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.usluga08 { border: 0; border-bottom: 2px solid var(--ugljen); }

/* measuring and prices */
.mjera01 { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(2rem, 4vw, 3rem); }
.mjera02 { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.mjera03 { min-width: 0; background: rgba(233, 237, 240, .92); padding: .2rem 0; }
.mjera04 { min-width: 0; max-width: 360px; justify-self: end; width: 100%; }
.mjera05 { font-size: .95rem; margin-top: .5rem; }
.cjenik01 { overflow-x: auto; margin: 1.5rem 0; border: 2px solid var(--ugljen); background: var(--bijela); }
.cjenik02 { width: 100%; border-collapse: collapse; min-width: 34rem; font-variant-numeric: tabular-nums; }
.cjenik02 caption { text-align: left; font-weight: 700; padding: .7rem .8rem; background: var(--ugljen); color: var(--bijela); }
.cjenik02 th, .cjenik02 td { text-align: left; vertical-align: top; padding: .65rem .8rem; border: 1px solid var(--celik-tamni); }
.cjenik02 thead th { background: var(--celik); }
.cjenik03 { background: var(--upozorenje); }
.cjenik04 { background: var(--zabrana); color: var(--bijela); }
.cjenik05 {
  display: inline-block; font-family: var(--f-naslov); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1;
  background: var(--narancasta); border: 2px solid var(--ugljen); padding: .3rem .7rem; margin-bottom: .6rem;
}

/* author */
.autor01 {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start;
  margin-top: 2rem; padding: 1rem 1.1rem;
  border: 2px solid var(--ugljen); background: var(--bijela);
}
.autor02 {
  width: 72px; height: 72px; display: grid; place-items: center;
  background: var(--ugljen); color: var(--narancasta);
  font-family: var(--f-naslov); font-weight: 700; font-size: 1.7rem;
  border: 2px solid var(--narancasta);
}
.autor03 { font-weight: 700; margin: 0; }
.autor04 { margin: 0 0 .4rem; font-size: .96rem; }
.autor01 p:last-child { margin-bottom: 0; }

/* form */
.upit01 {
  background-color: var(--narancasta);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  border-top: 2px solid var(--ugljen);
}
.upit02 { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.upit03 { min-width: 0; }
.upit03 a { color: var(--ugljen); font-weight: 700; }
.upit04 {
  min-width: 0; background: var(--celik);
  border: 2px solid var(--ugljen); box-shadow: 10px 10px 0 var(--ugljen);
  padding: clamp(1rem, 2.5vw, 1.8rem);
}
.upit05 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.upit06 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .7rem; }
.upit07 { border: 2px solid var(--ugljen); background: var(--bijela); padding: .8rem .9rem .2rem; margin: 0 0 1rem; min-width: 0; }
.upit07 legend { font-weight: 700; padding: 0 .4rem; }
.upit08 { font-size: .95rem; margin: 0 0 .8rem; }
.upit09 { margin-top: .8rem; padding: .7rem .9rem; background: #f6d9d3; border-left: 8px solid var(--zabrana); font-weight: 600; }

/* inner pages */
.stranica01 {
  background-color: var(--ugljen); background-image: var(--kocke-tamne); background-size: 120px 208px;
  color: var(--bijela); padding: clamp(2rem, 5vw, 4rem) 0;
}
.stranica01 h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 0; max-width: 20ch; }
.stranica01 p { margin: .8rem 0 0; background: rgba(27, 29, 31, .86); padding: .4rem .6rem; display: inline-block; }
.stranica02 { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; font-size: .95rem; }
.stranica02 li + li::before { content: "/"; margin-right: .4rem; color: var(--narancasta); }
.stranica02 a { color: var(--celik); }
.stranica03 { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem); }
.stranica04 { background: rgba(251, 252, 252, .95); border: 2px solid var(--ugljen); padding: clamp(1.1rem, 3vw, 2.2rem); }
.stranica04 h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 1.4em; }
.stranica04 h2:first-child { margin-top: 0; }
.stranica05 { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start; }
.stranica05 > * { min-width: 0; }
.stranica06 { background: var(--narancasta); border: 2px solid var(--ugljen); padding: 1rem 1.2rem; margin: 1.5rem 0; font-weight: 600; }
.stranica06 a { color: var(--ugljen); }
.stranica07 { font-family: var(--f-naslov); font-weight: 700; font-size: clamp(4rem, 12vw, 9rem); line-height: .9; color: var(--narancasta); display: block; }

/* policies */
.odredba01 { list-style: none; margin: 0; padding: 0; counter-reset: odredba; }
.odredba02 {
  counter-increment: odredba;
  border-left: 10px solid var(--narancasta);
  padding: .2rem 0 .4rem 1.1rem; margin-bottom: 1.6rem;
}
.odredba02:nth-child(even) { border-left-color: var(--ugljen); }
.odredba02 h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-top: 0; }
.odredba02 h2::before { content: counter(odredba) ". "; font-variant-numeric: tabular-nums; }

/* footer */
.podnozje01 { background: var(--ugljen); color: var(--celik); padding: 2.5rem 0 1.5rem; border-top: 8px solid var(--narancasta); }
.podnozje02 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 2rem; }
.podnozje02 > * { min-width: 0; }
.podnozje03 { font-family: var(--f-naslov); font-weight: 700; font-size: 1.75rem; margin: 0 0 .5rem; color: var(--bijela); }
.podnozje04 { list-style: none; margin: 0; padding: 0; }
.podnozje04 li { margin-bottom: .35rem; }
.podnozje01 a { color: var(--celik); }
.podnozje01 a:hover { color: var(--narancasta); }
.podnozje05 { font-weight: 700; margin-bottom: .5rem; color: var(--bijela); }
.podnozje06 { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--ugljen-meki); font-size: .95rem; }
.podnozje07 { font-style: normal; }

/* cookie notice */
.kolacic01 {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  max-height: 25vh; overflow: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.2rem;
  background: var(--bijela); color: var(--ugljen);
  border-top: 4px solid var(--narancasta);
  padding: .5rem 1.25rem; font-size: .92rem;
}
.kolacic01[hidden] { display: none; }
.kolacic01 p { margin: 0; flex: 1 1 16rem; max-width: none; }
.kolacic02 { display: flex; gap: .6rem; flex: 0 1 auto; }
.kolacic03 {
  flex: 1 1 7rem; font: 700 .95rem var(--f-tekst);
  background: var(--celik); color: var(--ugljen);
  border: 2px solid var(--ugljen); border-radius: 2px; padding: .35rem .9rem; cursor: pointer;
  transition: background-color .2s;
}
.kolacic03:hover { background: var(--narancasta); }
.kolacic03:active { transform: translateY(1px); }

/* reveal */
.skripta01 .pojava01 { opacity: 0; transform: translateX(90px); transition: opacity .4s ease-out, transform .4s ease-out, box-shadow .25s; }
.skripta01 .pojava01.pojava03 { opacity: 1; transform: none; }
.skripta01 .pojava02 { opacity: 0; transform: translateY(26px); transition: opacity .3s steps(4, end), transform .3s steps(4, end), box-shadow .25s; }
.skripta01 .pojava02.pojava03 { opacity: 1; transform: none; }
.skripta01 .pojava03.granica04:hover { transform: translateY(-5px); }
.skripta01 .pojava03.usluga03:hover { transform: translateY(-6px); }

/* breakpoints */
@media (max-width: 1280px) {
  .brojka02 { min-width: 8.5rem; }
}
@media (max-width: 1100px) {
  .uvod06 { grid-template-columns: minmax(0, 1fr); }
  .brojka01 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brojka02 { min-width: 0; }
  .usluga03 { grid-column: span 3; }
  .usluga04 { grid-column: span 6; }
  .izbornik03 { font-size: 1.05rem; padding-inline: .55rem; }
  .izbornik03::after { left: .55rem; right: .55rem; }
  .podnozje02 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .uvod02, .izlaz02, .mjera02, .upit02, .stranica05 { grid-template-columns: minmax(0, 1fr); }
  .uvod04, .izlaz03 { position: static; }
  .mjera04 { justify-self: start; max-width: 300px; }
  .granica02 { opacity: .35; width: 70vw; }
  .granica08, .granica09 { margin-left: 0; }
  .zaglavlje03 { min-height: 68px; }
  .znak02 { width: 52px; height: 52px; }
  .zaglavlje02 .znak02 { transform: none; border-radius: 50%; }
  .zaglavlje02 .znak03 { opacity: 1; width: auto; }
  .zaglavlje02 .zaglavlje03 { min-height: 60px; }
  .izbornik06 { display: inline-block; }
  .izbornik01 > .izbornik02, .izbornik01 > .izbornik08,
  .zaglavlje02 .izbornik01 > .izbornik08 { display: none; }
  .izbornik07 {
    position: fixed; inset: 0; z-index: 120;
    background: var(--ugljen); overflow-y: auto;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 1rem 1.25rem 2rem; gap: .6rem;
  }
  .izbornik07 > .izbornik06 { align-self: flex-end; order: -1; }
  .izbornik07 > .izbornik02, .izbornik07 > .izbornik08,
  .zaglavlje02 .izbornik07 > .izbornik08 {
    display: flex; flex-direction: column; gap: .6rem; position: static;
    border: 0; padding: 0; min-width: 0; background: none;
  }
  .izbornik07 .izbornik03 {
    font-size: 1.5rem; padding: 1rem 1.1rem;
    background: var(--narancasta); color: var(--ugljen); border: 2px solid var(--celik);
  }
  .izbornik07 .izbornik08 .izbornik03 { background: var(--celik); }
  .izbornik07 .izbornik03::after { background: var(--ugljen); left: 0; right: 0; }
}
@media (max-width: 768px) {
  .granica04 { grid-template-columns: minmax(0, 1fr); }
  .usluga03, .usluga04 { grid-column: span 6; }
  .upit06 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uvod01, .stranica01 { background-size: 90px 156px; }
}
@media (max-width: 640px) {
  .upit05 { grid-template-columns: minmax(0, 1fr); }
  .podnozje02 { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .brojka01 { grid-template-columns: minmax(0, 1fr); }
  .brojka02 { display: flex; align-items: baseline; gap: .8rem; }
  .skripta01 .pojava01 { transform: translateX(40px); }
  .autor01 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  body { font-size: 1rem; }
  .okvir01, .okvir02 { width: min(100% - 1.6rem, 1240px); }
  .uvod08 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .znak03 { font-size: 1.25rem; }
  .znak02 { width: 44px; height: 44px; }
  .shema01 { box-shadow: 6px 6px 0 var(--narancasta); }
  .upit04 { box-shadow: 6px 6px 0 var(--ugljen); }
  .uvod05 { margin-left: 0; }
}
@media (max-height: 640px) and (min-width: 901px) {
  .zaglavlje03 { min-height: 64px; }
  .znak02 { width: 52px; height: 52px; }
  .naslov01 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .skripta01 .pojava01, .skripta01 .pojava02 { opacity: 1; transform: none; }
}