/* Whole-page editorial layout. All copy, client identities and product
   destinations remain in the HTML; layout never depends on animation. */
:root {
  --max: 1440px;
  --sek: clamp(80px,9vw,132px);
  --oluk: clamp(20px,2.5vw,36px);
}
.d2 { line-height: 1.08; }
.vod { font-size: 17px; line-height: 1.7; }
.mk::before { height: .12em; bottom: .03em; left: -.03em; right: -.03em; }
.izj { height: 180vh; }
.gd { height: 130vh; }
.pr-s { height: 175vh; overflow: clip; isolation: isolate; }
.oz { letter-spacing: .1em; line-height: 1.6; }
.rd-g, .inv-vrh, .vp-vrh { align-items: start; }
.rd-g .vod, .inv-vod, .vp-vrh > .vod { padding-top: 36px; }

/* Selected work: one lead story, two supporting stories, then the archive. */
.work-editorial .rd-g { flex-wrap: nowrap; gap: 80px; padding-bottom: 40px; border-bottom: 1px solid var(--linija); }
.work-editorial .rd-g > div { flex: 1; }
.work-editorial .rd-g > .vod { flex: 0 1 370px; }
.work-editorial .wk { margin-top: 48px; }
.work-editorial .wk-r { gap: 36px; margin-bottom: 64px; }
.work-editorial .wk-k { margin-top: 0; min-width: 0; }
.work-editorial .wk-r:first-child { grid-template-columns: 1.35fr 1fr; column-gap: 48px; row-gap: 40px; }
.work-editorial .wk-r:first-child .wk-k:first-child { grid-row: span 2; }
.work-editorial .wk-r:first-child .wk-k:first-child .wk-o { aspect-ratio: .92; }
.work-editorial .wk-r:first-child .wk-k:not(:first-child) .wk-o { aspect-ratio: 1.9; }
.work-editorial .wk-r:first-child .wk-k:first-child .wk-t b { font-size: clamp(34px,4vw,56px); }
.work-editorial .wk-r:first-child .wk-k:first-child .wk-t em { max-width: 46ch; }
.work-editorial .wk-o { aspect-ratio: 1.35; border-radius: 16px; background: #ebe6e0; clip-path: none; }
.work-editorial .wk-o img { height: 100%; }
.work-editorial .wk-t { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 20px; }
.work-editorial .wk-t i, .work-editorial .wk-t em { margin-top: 0; }
.work-editorial .wk-t b { font-size: 30px; }
.work-editorial .wk-t i { font: 10px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.work-editorial .wk-t em { margin-top: 6px; font-size: 14px; }
.work-editorial .wk-r:last-child { margin-bottom: 0; }

/* A quiet institutional introduction, with an intentional logo field. */
.icbl { padding-block: 80px; }
.icbl-r { grid-template-columns: .36fr 1fr .64fr; gap: 40px; }
.icbl-znak { min-height: 240px; }
.icbl-kopija h2 { font-size: clamp(38px,4.5vw,62px); }

/* The client's gold palette stays local to this case study. */
.gsa { padding-block: 88px; }
.gsa-glavno { grid-template-columns: 1fr 1fr; gap: 64px; padding-block: 64px; align-items: start; }
.gsa-kicker { margin-bottom: 30px; line-height: 1.7; }
.gsa-naslov { font-size: clamp(60px,7vw,100px); line-height: .98; }
.gsa-vod { font-size: clamp(23px,2vw,29px); line-height: 1.35; max-width: 30ch; margin-top: 32px; }
.gsa-opis { line-height: 1.8; }
.gsa-pecat { width: 100%; aspect-ratio: 1.3; background: var(--gs-ploca); border: 1px solid var(--gs-linija); border-radius: 24px; }
.gsa-pecat-logo { width: 48%; }
.gsa-uloga { padding: 26px 0; margin-top: 24px; }
.gsa-uloga h3 { font-size: 22px; line-height: 1.3; max-width: 33ch; }
.gsa-uloga li { font-size: 12px; }
.gsa-obuhvat, .gsa-partneri, .gsa-projektni { padding-block: 48px; }
.gsa-obuhvat-vrh, .gsa-partneri-vrh, .gsa-projektni-vrh { grid-template-columns: .55fr 1.45fr; gap: 48px; }
.gsa-sistem, .gsa-partneri h3, .gsa-projektni h3 { font-size: clamp(25px,2.5vw,34px); line-height: 1.24; max-width: 36ch; }
.gsa-stubovi { gap: 24px; margin-top: 32px; border: 0; }
.gsa-stub, .gsa-stub + .gsa-stub { padding: 32px; border: 1px solid var(--gs-linija); border-radius: 20px; background: var(--gs-ploca); }
.gsa-stub h3 { max-width: 27ch; min-height: 4em; font-size: 24px; line-height: 1.32; margin-top: 20px; }
.gsa-stub ul { gap: 12px; margin-top: 24px; }
.gsa-stub li { font-size: 13px; line-height: 1.6; }
.gsa-partneri-l { margin-top: 32px; }
.gsa-partneri-l li { min-height: 136px; padding-block: 20px; }
.gsa-partneri-l img { max-height: 56px; }
.gsa-projektni-l { margin-top: 32px; }
.gsa-projektni-l li { min-height: 180px; padding-block: 24px; }
.gsa-eu { grid-template-columns: 1fr 1fr; padding: 36px; gap: 48px; margin-top: 24px; border-radius: 0 0 20px 20px; }
.gsa-eu h3 { font-size: 34px; line-height: 1.15; max-width: 24ch; }

/* Process is a six-part spread, so every step has a stable place. */
.process-editorial { position: relative; z-index: 3; height: auto; min-height: 0; display: block; padding-block: var(--sek); background: #191a18; }
.process-editorial .hz-g { margin-bottom: 52px; }
.process-editorial .hz-red { grid-template-columns: 1.2fr .8fr; gap: 80px; }
.process-editorial .hz-g .d2 { font-size: clamp(40px,5vw,68px); }
.process-editorial .hz-g .vod { padding-top: 28px; color: #bcbdb7; }
.process-editorial .hz-t { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); width: auto; }
.process-editorial .hz-k { display: flex; flex-direction: column; min-width: 0; border-radius: 16px; background: #222420; border: 1px solid #383b34; }
.process-editorial .hz-k:hover { transform: translateY(-4px); }
.process-editorial .hz-f { aspect-ratio: 2.2; }
.process-editorial .hz-b { font-size: 48px; bottom: 12px; }
.process-editorial .hz-c { padding: 26px; gap: 16px; }
.process-editorial .hz-k h3 { font-size: 28px; font-weight: 400; line-height: 1.17; }
.process-editorial .hz-k p { font-size: 14px; line-height: 1.7; color: #c2c3bd; }
.process-editorial .hz-k .kut { font: 10px/1.6 var(--mono); color: #e5e5dd; letter-spacing: .05em; }
.process-editorial .hz-k--kraj { background: var(--zar); border-color: var(--zar); }
.process-editorial .hz-k--kraj .hz-c { min-height: 0; justify-content: start; }
.process-editorial .hz-k--kraj p { color: white; }
.process-editorial .hz-k--kraj h3 { font-size: 38px; }
.process-editorial .hz-k--kraj .kut { display: flex; justify-content: space-between; font: 14px var(--sans); padding: 16px 20px; border: 0; border-radius: 999px; background: var(--tinta); color: #fff; }
.process-editorial .hz-u { margin-top: 0; }
.process-editorial .hz-u li { font-size: 13px; padding-block: 8px; }

.zp { background: #efece6; }
.zp-m { gap: 72px; align-items: center; }
.zp-vrh { position: static; }
.zp-d { border-radius: 20px; box-shadow: 0 16px 45px -30px #4f493d66; border-color: #ded9d0; overflow: hidden; }
.zp-z { padding: 24px 28px; background: #f8f6f1; }
.zp-r { padding-block: 24px; }
.zp-ime { font-size: 25px; }
.zp-op { font-size: 14px; }
.zp-p { padding: 24px 28px; line-height: 1.65; }

/* Five disciplines: intro plus five illustrated editorial blocks. */
.services-editorial { height: auto; padding-block: var(--sek); }
.services-editorial .tk-lj { position: static; height: auto; overflow: visible; }
.services-editorial .tk-luk, .services-editorial .tk-desno { display: none; }
.services-editorial .tk-sadrzaj { height: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px 56px; max-width: var(--max); margin: auto; padding: 0 var(--pad); }
.services-heading { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr .8fr; column-gap: 80px; }
.services-heading .oz { grid-column: 1 / -1; margin-bottom: 20px; }
.services-heading .d2 { max-width: 17ch; }
.services-heading .vod { padding-top: 16px; max-width: 36ch; }
.services-editorial .tk-u { grid-area: auto; opacity: 1; transform: none; margin: 0; padding: 0 0 28px; border-top: 0; border-bottom: 1px solid var(--linija); position: relative; }
.service-image { width: 100%; height: auto; aspect-ratio: 2.05; object-fit: cover; object-position: top; border-radius: 16px; margin-bottom: 28px; }
.services-editorial .tk-br { position: absolute; top: 16px; left: 16px; margin: 0; padding: 7px 12px; background: var(--papir); border-radius: 999px; font-size: 10px; }
.services-editorial .tk-u h3 { font-size: 44px; max-width: none; margin-bottom: 14px; }
.services-editorial .tk-v { max-width: 52ch; margin-bottom: 22px; font-size: 16px; line-height: 1.7; }
.services-editorial .tk-p { gap: 8px; }
.services-editorial .tk-p li { background: transparent; font-size: 11px; padding: 6px 12px; }
.services-editorial .tk-u:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-content: center; }
.services-editorial .tk-u:last-child .service-image { grid-column: 2; grid-row: 1 / 5; margin-bottom: 0; aspect-ratio: 1.8; height: 100%; }
.services-editorial .tk-u:last-child .tk-br { left: auto; right: 16px; }
.services-editorial .tk-u:last-child h3, .services-editorial .tk-u:last-child .tk-v, .services-editorial .tk-u:last-child .tk-p { grid-column: 1; }

/* Price list becomes a compact two-column comparison. */
.price-heading, .team-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px 80px; margin-bottom: 48px; }
.price-heading > .oz, .team-heading > .oz { grid-column: 1 / -1; }
.price-heading .d2 { max-width: 17ch; }
.price-heading > .vod, .team-heading > .vod { padding-top: 8px; }
.team-heading > .d2 { margin: 0 !important; }
.team-heading > .vod { margin: 0 !important; }
#cijene .cj-l { display: grid; grid-template-columns: 1fr 1fr; border: 0; gap: 16px; }
#cijene .cj-r { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-content: start; padding: 28px; background: #f0ece7; border: 1px solid transparent; border-radius: 16px; transition: border-color .2s,background .2s; }
#cijene .cj-r:hover { border-color: #c9c1b7; background: #fff; padding: 28px; }
#cijene .cj-t { grid-column: 1 / -1; font-size: 32px; }
#cijene .cj-o { grid-column: 1 / -1; min-height: 3.3em; max-width: 52ch; font-size: 14px; order: 0; }
#cijene .cj-c { grid-column: 1; grid-row: 3; align-self: end; font-size: 24px; padding-top: 12px; }
#cijene .cj-v { grid-column: 1; grid-row: 4; justify-self: start; font-size: 12px; order: 0; }
#cijene .cj-s { grid-column: 2; grid-row: 3 / 5; align-self: center; }
#cijene .cj-r:last-child { grid-column: 1 / -1; grid-template-columns: 1fr 1fr auto; background: #e8e1d8; }
#cijene .cj-r:last-child .cj-t { grid-column: 1; }
#cijene .cj-r:last-child .cj-o { grid-column: 1; }
#cijene .cj-r:last-child .cj-c { grid-column: 2; grid-row: 1; padding: 0; justify-self: end; align-self: center; }
#cijene .cj-r:last-child .cj-v { grid-column: 2; grid-row: 2; justify-self: end; }
#cijene .cj-r:last-child .cj-s { grid-column: 3; grid-row: 1 / 3; }
#cijene .zk { display: grid; grid-template-columns: 1fr auto; gap: 20px 48px; background: #191a18; border-radius: 20px; padding: 40px; }
#cijene .zk h3 { grid-column: 1; font-weight: 400; font-size: 38px; }
#cijene .zk p { grid-column: 1; font-size: 15px; }
#cijene .zk .veza { grid-column: 2; grid-row: 1 / 3; align-self: center; background: var(--zar); border-radius: 999px; padding: 16px 24px; }

.pst-l { margin-top: 48px; gap: 40px; }
.pst-l li { padding-top: 26px; }
.pst-l b { font: 48px/1.2 var(--display); letter-spacing: -.03em; color: var(--zar-t); }
.pst-l h3 { margin-top: 24px; font-size: 28px; font-weight: 400; }
.pst-l p { font-size: 15px; }
.inv { background: #191a18; }
.inv-br { margin-top: 56px; }
.inv-br div { padding-block: 28px; }
.inv-br div b { font-size: clamp(60px,7vw,100px); color: #f4efea; }
.inv-br div span { color: #bcbdb7; font-size: 13px; }
.inv-d { margin-top: 40px; }
.vn-r { padding-block: 28px; }
.vn-ime { font-size: 38px; }
.vn-op { line-height: 1.7; }
.vn-st { border: 1px solid var(--linija); padding: 6px 12px; border-radius: 999px; justify-self: start; }

/* Portraits lead the team section; text gets its own readable space. */
.team-editorial { background: #efece6; }
.team-editorial .tm-l { gap: 56px; }
.team-editorial .tm-k { display: grid; grid-template-columns: 1fr; gap: 0; align-content: start; }
.team-editorial .tm-f { grid-row: auto; width: 100%; max-width: none; aspect-ratio: 1.25; border-radius: 18px; margin-bottom: 26px; }
.team-editorial .tm-f img { object-position: 50% 30%; }
.team-editorial .tm-k h3 { font-size: 38px; }
.team-editorial .tm-k .kat { font: 11px/1.7 var(--mono); margin-top: 10px; }
.team-editorial .tm-k p:not(.kat) { max-width: 50ch; margin-top: 18px; font-size: 15px; }
.team-editorial .tm-e { display: grid; grid-template-columns: .7fr 1.3fr; gap: 48px; }
.team-editorial .tm-e-l { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 24px; }
.team-editorial .tm-e-l li { font-size: 13px; }

@media (max-width:1000px) {
  .work-editorial .rd-g { gap: 32px; }
  .work-editorial .wk-r, .work-editorial .wk-r:first-child { gap: 28px; }
  .icbl-r { grid-template-columns: 1fr 1fr; }
  .icbl-oznaka { grid-column: 1 / -1; }
  .icbl-znak { grid-column: auto; }
  .gsa-glavno { gap: 36px; }
  .gsa-naslov { font-size: 64px; }
  .gsa-stub, .gsa-stub + .gsa-stub { padding: 24px; }
  .gsa-eu { gap: 28px; grid-template-columns: 1fr; }
  .process-editorial .hz-t { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .process-editorial .hz-red { gap: 36px; }
  .zp-m { gap: 36px; }
  .services-editorial .tk-sadrzaj { gap: 48px 32px; }
  .services-heading { gap: 20px 40px; }
  .team-editorial .tm-e { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width:700px) {
  .d2 { font-size: clamp(35px,8.8vw,48px); }
  .price-heading, .team-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
  .price-heading > .vod, .team-heading > .vod { padding: 0; }
  .rd-g .vod, .inv-vod, .vp-vrh > .vod { padding-top: 0; }
  .work-editorial .rd-g { display: grid; gap: 24px; padding-bottom: 28px; }
  .work-editorial .wk { margin-top: 32px; }
  .work-editorial .wk-r, .work-editorial .wk-r:first-child { grid-template-columns: 1fr; row-gap: 40px; margin-bottom: 40px; }
  .work-editorial .wk-r:first-child .wk-k:first-child { grid-row: auto; }
  .work-editorial .wk-o, .work-editorial .wk-r:first-child .wk-k:first-child .wk-o, .work-editorial .wk-r:first-child .wk-k:not(:first-child) .wk-o { aspect-ratio: 1.3; }
  .work-editorial .wk-r:first-child .wk-k:first-child .wk-t b { font-size: 34px; }
  .work-editorial .wk-t em { display: block; }
  .icbl-r { grid-template-columns: 1fr; gap: 28px; }
  .icbl-znak { min-height: 180px; padding: 28px; }
  .gsa { padding-block: 64px; }
  .gsa-vrh { flex-direction: column; gap: 14px; }
  .gsa-st { max-width: none; text-align: left; }
  .gsa-glavno { grid-template-columns: 1fr; gap: 40px; padding-block: 40px; }
  .gsa-naslov { font-size: clamp(56px,17vw,82px); }
  .gsa-pecat { aspect-ratio: 1.4; }
  .gsa-obuhvat-vrh, .gsa-partneri-vrh, .gsa-projektni-vrh { grid-template-columns: 1fr; gap: 20px; }
  .gsa-stubovi { grid-template-columns: 1fr; gap: 16px; }
  .gsa-stub h3 { min-height: 0; font-size: 23px; }
  .gsa-partneri-l { grid-template-columns: 1fr 1fr; }
  .gsa-partneri-l li, .gsa-partneri-l li + li { min-height: 120px; padding: 18px; }
  .gsa-partneri-l img { max-width: 100%; }
  .gsa-projektni-l { grid-template-columns: 1fr; }
  .gsa-projektni-l li, .gsa-projektni-l li + li { min-height: 0; padding: 24px 0; }
  .gsa-eu { margin-inline: 0; padding: 26px; }
  .gsa-eu h3 { font-size: 28px; }
  .process-editorial .hz-red { grid-template-columns: 1fr; gap: 22px; }
  .process-editorial .hz-g .vod { padding-top: 0; }
  .process-editorial .hz-t { grid-template-columns: 1fr; gap: 20px; }
  .process-editorial .hz-k { flex-basis: auto; }
  .process-editorial .hz-f { aspect-ratio: 2.6; }
  .process-editorial .hz-c { padding: 24px; }
  .zp-m { grid-template-columns: 1fr; gap: 36px; }
  .zp-z { flex-wrap: wrap; gap: 8px; padding: 20px; }
  .zp-ime { font-size: 23px; }
  .zp-p { padding: 20px; }
  .services-editorial .tk-sadrzaj { grid-template-columns: 1fr; gap: 40px; }
  .services-heading { grid-template-columns: 1fr; gap: 20px; }
  .services-heading .oz { margin: 0; }
  .services-heading .vod { padding: 0; max-width: 50ch; }
  .services-editorial .tk-u h3 { font-size: 38px; }
  .service-image { aspect-ratio: 1.7; margin-bottom: 24px; }
  .services-editorial .tk-u:last-child { display: block; }
  .services-editorial .tk-u:last-child .service-image { height: auto; aspect-ratio: 1.7; margin-bottom: 24px; }
  .services-editorial .tk-u:last-child .tk-br { right: auto; left: 16px; }
  #cijene .cj-l { grid-template-columns: 1fr; }
  #cijene .cj-r, #cijene .cj-r:hover { padding: 24px; }
  #cijene .cj-t { font-size: 30px; }
  #cijene .cj-o { min-height: 0; }
  #cijene .cj-r:last-child { grid-template-columns: 1fr auto; }
  #cijene .cj-r:last-child .cj-t, #cijene .cj-r:last-child .cj-o { grid-column: 1 / -1; }
  #cijene .cj-r:last-child .cj-c { grid-column: 1; grid-row: 3; justify-self: start; padding-top: 12px; }
  #cijene .cj-r:last-child .cj-v { grid-column: 1; grid-row: 4; justify-self: start; }
  #cijene .cj-r:last-child .cj-s { grid-column: 2; grid-row: 3 / 5; }
  #cijene .zk { grid-template-columns: 1fr; padding: 28px; }
  #cijene .zk .veza { grid-column: 1; grid-row: auto; justify-self: start; }
  .pst-l { grid-template-columns: 1fr; gap: 32px; }
  .pst-l b { font-size: 44px; }
  .inv-vrh, .vp-vrh { grid-template-columns: 1fr; gap: 24px; }
  .inv-br { grid-template-columns: 1fr 1fr; margin-top: 36px; }
  .inv-br div b { font-size: 68px; }
  .vn-ime { font-size: 34px; }
  .team-editorial .tm-l { grid-template-columns: 1fr; gap: 48px; }
  .team-editorial .tm-f { aspect-ratio: 1.1; }
  .team-editorial .tm-k h3 { font-size: 34px; }
  .team-editorial .tm-e-l { grid-template-columns: 1fr 1fr; gap: 0 16px; }
}