/* ============================================================
   CURRENT+ R02 — sloj nad zivom naslovnom
   Uklanjanje ovog <link> i pratećeg <script> vraća tačno CURRENT.

   Sta ovaj sloj radi:
   A. DUBINA  — Standard / Signature / Custom sa CENOVNIM SIDRIMA,
                afordansom i promenom SAMO na klik (hover ne menja nivo).
   B. FLAGSHIP— jedan rad izlazi iz showroom-a u punu sirinu ekrana,
                UNUTAR #radovi, ne kao druga portfolio sekcija.
   C. SAZIMANJE — mrtvo crno se skracuje; cinematic tenzija ostaje.
   D. #ponuda — cenovna traka se ne ponavlja u punoj snazi (sidra su gore).

   Ne uvodi ni jednu novu boju ni pismo. Sve iz site.css tokena.
   ============================================================ */

/* ============================================================
   A · DUBINA — tier selektor sa cenovnim sidrima
   ============================================================ */
.tierx{position:relative;padding-block:clamp(46px,5vw,84px);scroll-margin-top:96px}
.tierx .wrap{max-width:var(--max-w);margin-inline:auto;padding-inline:var(--pad-x)}

.tierx-head{
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:end;
  padding-bottom:clamp(18px,2.2vw,28px);
}
.tierx-head h2{
  font-size:clamp(32px,4.1vw,60px);font-weight:760;letter-spacing:-.034em;
  line-height:.98;margin:0;max-width:15ch;
}
.tierx-head h2 em{font-style:normal;color:var(--gold)}
.tierx-head .side{
  text-align:right;color:var(--muted);max-width:26ch;font-size:13.5px;line-height:1.55;margin:0;
}

/* --- SIGNAL nit: jedan crtez, tri faze --- */
.tierx-thread{position:relative;margin-bottom:6px}
.tierx-thread svg{display:block;width:100%;height:clamp(44px,3.6vw,62px)}
.tx-seg{fill:none;stroke:rgba(244,240,230,.17);stroke-width:1.1;
  transition:stroke .45s var(--ease-out),stroke-width .45s var(--ease-out)}
.tx-node{fill:rgba(244,240,230,.22);transition:fill .45s var(--ease-out)}
.tierx-thread[data-a="1"] #txg1,
.tierx-thread[data-a="2"] #txg2,
.tierx-thread[data-a="3"] #txg3{stroke:var(--gold);stroke-width:1.6}
.tierx-thread[data-a="1"] .tn1{fill:var(--gold-hi)}
.tierx-thread[data-a="2"] .tn2{fill:var(--gold-hi)}
.tierx-thread[data-a="3"] .tn3{fill:var(--gold-hi)}
.tx-cap{fill:#8b877b;font-family:var(--font-m);font-size:9px;letter-spacing:2.4px;
  transition:fill .45s var(--ease-out)}
.tierx-thread[data-a="1"] #txc1,
.tierx-thread[data-a="2"] #txc2,
.tierx-thread[data-a="3"] #txc3{fill:#e9b850}

/* --- uputstvo: jedna linija, da se selektor ne cita kao tekst --- */
.tierx-hint{
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 12px;display:flex;align-items:center;gap:10px;
}
.tierx-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}

/* --- PRVI NIVO --- */
.tx-cols{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto auto auto auto auto;
  border-top:1px solid var(--line-strong);
  transition:grid-template-columns .6s var(--ease-io);
}
.tx-cols[data-a="1"]{grid-template-columns:1.34fr .83fr .83fr}
.tx-cols[data-a="2"]{grid-template-columns:.83fr 1.34fr .83fr}
.tx-cols[data-a="3"]{grid-template-columns:.83fr .83fr 1.34fr}

.txc{
  position:relative;display:grid;grid-row:span 5;grid-template-rows:subgrid;
  align-content:start;min-width:0;cursor:pointer;
  padding:clamp(18px,2vw,30px) clamp(16px,1.8vw,30px) clamp(18px,2vw,26px);
  transition:opacity .45s var(--ease-out),background .3s var(--ease-out);
}
.txc:first-child{padding-left:0}
.txc:last-child{padding-right:0}
.txc + .txc::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line-strong);
}
/* zlatna nit aktivnog stupca */
.txc::after{
  content:"";position:absolute;left:0;top:0;height:0;width:2px;
  background:linear-gradient(180deg,var(--gold) 0,var(--gold) 46%,var(--gold-deep) 82%,transparent 100%);
  transition:height .6s var(--ease-io);
}
.txc.on::after{height:70%}
/* zlatni prag: aktivan stubac je „otvoren" nadole ka grani */
.txc.on{box-shadow:inset 0 -2px 0 var(--gold)}
/* neaktivni ostaju CITLJIVI — cene ne smeju da nestanu */
.tx-cols .txc:not(.on){opacity:.9}
.txc:hover:not(.on){background:rgba(244,240,230,.022)}

.txc-hit{
  position:absolute;inset:0;z-index:2;appearance:none;border:0;background:none;
  cursor:pointer;padding:0;font:inherit;color:inherit;
}
.txc-hit:focus-visible{outline:none}
.txc:has(.txc-hit:focus-visible){box-shadow:inset 3px 0 0 var(--gold),inset 0 -2px 0 var(--gold)}
@supports not selector(:has(*)){
  .txc-hit:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
}
.txc > *:not(.txc-hit){position:relative;z-index:1}

.txc-num{
  font-size:clamp(32px,3.2vw,54px);font-weight:800;letter-spacing:-.045em;line-height:.8;
  margin:0 0 clamp(10px,1.2vw,16px);color:transparent;
  -webkit-text-stroke:1px rgba(244,240,230,.2);
  transition:-webkit-text-stroke-color .45s var(--ease-out);
}
.txc.on .txc-num{-webkit-text-stroke-color:rgba(233,184,80,.62)}
.txc-name{
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px;transition:color .4s var(--ease-out);
}
.txc.on .txc-name{color:var(--gold)}
.txc-h{
  font-size:clamp(17px,1.55vw,25px);font-weight:720;letter-spacing:-.024em;
  line-height:1.1;margin:0 0 9px;
}
.txc-p{
  font-size:14px;line-height:1.5;color:var(--ink);opacity:.6;margin:0 0 clamp(12px,1.4vw,18px);
  max-width:30ch;transition:opacity .4s var(--ease-out);
}
.txc.on .txc-p{opacity:.78}

/* --- CENOVNI MODEL U MIROVANJU — sva tri nivoa pre ijednog klika --- */
.txc-model{align-self:end;margin:0 0 clamp(12px,1.4vw,16px)}
.txc-model .m-k{
  display:block;font-family:var(--font-m);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-bottom:7px;
}
.txc-model .m-v{
  display:block;font-size:clamp(18px,1.7vw,26px);font-weight:760;letter-spacing:-.028em;
  line-height:1.06;color:var(--ink);transition:color .4s var(--ease-out);
}
.txc.on .txc-model .m-v{color:var(--gold)}

/* --- AFORDANS --- */
.txc-cta{
  align-self:end;display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:640;letter-spacing:.01em;color:var(--muted);
  padding-bottom:6px;border-bottom:1px solid var(--line-strong);
  width:fit-content;max-width:100%;
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out);
}
.txc-cta .ar{color:var(--gold);transition:transform .25s var(--ease-out)}
.txc:hover .txc-cta,.txc:has(.txc-hit:focus-visible) .txc-cta{color:var(--ink);border-color:var(--gold)}
.txc:hover .txc-cta .ar{transform:translateY(3px)}
.txc.on .txc-cta{color:var(--gold);border-color:var(--gold)}
.txc.on .txc-cta .ar{transform:rotate(180deg)}

/* --- VEZA: zlatni segment tacno ispod aktivnog stupca --- */
.tx-link{position:relative;height:2px;margin-bottom:clamp(20px,2.4vw,34px)}
.tx-link::after{
  content:"";position:absolute;top:-2px;height:2px;background:var(--gold);
  transition:left .6s var(--ease-io),width .6s var(--ease-io);
}
.tx-link[data-a="1"]::after{left:0;width:44.6%}
.tx-link[data-a="2"]::after{left:27.7%;width:44.6%}
.tx-link[data-a="3"]::after{left:55.4%;width:44.6%}

/* --- DRUGI NIVO: sve tri grane u istoj celiji -> bez skoka --- */
.tx-branches{display:grid}
.txb{
  grid-area:1/1;min-width:0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--ease-out),visibility 0s linear .4s;
}
.txb.on{opacity:1;visibility:visible;pointer-events:auto;transition-delay:.1s,0s}

.txb-cap{margin:0 0 clamp(16px,1.8vw,24px);padding-bottom:13px;border-bottom:1px solid var(--line)}
.txb-cap .c-t{
  display:block;font-family:var(--font-m);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.txb-cap .c-s{
  display:block;font-size:clamp(15px,1.25vw,19px);font-weight:640;letter-spacing:-.014em;
  color:var(--ink);opacity:.86;line-height:1.35;
}

.txb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;flex:1}
.txi{
  position:relative;min-width:0;display:flex;flex-direction:column;
  padding:2px clamp(18px,2vw,30px) 0;
}
.txi:first-child{padding-left:0}
.txi:last-child{padding-right:0}
.txi + .txi::before{
  content:"";position:absolute;left:0;top:0;bottom:4px;width:1px;background:var(--line);
}
.txi.lead::after{
  content:"";position:absolute;left:0;top:0;width:2px;height:46px;
  background:linear-gradient(180deg,var(--gold),transparent);
}
.txi-tag{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 9px;min-height:11px;
}
/* dva reda rezervisana da bi sve tri cene stajale na istoj liniji */
.txi-name{font-size:clamp(16px,1.25vw,20px);font-weight:700;letter-spacing:-.015em;
  line-height:1.16;margin:0 0 10px;min-height:2.32em}
.txi-price{
  font-size:clamp(30px,3vw,50px);font-weight:800;letter-spacing:-.045em;line-height:.86;
  margin:0 0 5px;color:var(--ink);
}
.txi-price em{font-style:normal;font-size:.42em;font-weight:600;letter-spacing:-.01em;
  margin-left:.14em;vertical-align:.34em;color:var(--gold)}
.txi-price.range{font-size:clamp(24px,2.3vw,38px);letter-spacing:-.035em}
.txi-price.word{font-size:clamp(18px,1.5vw,24px);font-weight:700;letter-spacing:.01em;
  line-height:1.14;color:var(--gold)}
.txi-unit{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin:0 0 12px;
}
.txi-for{font-size:14px;line-height:1.5;color:var(--ink);opacity:.68;margin:0;max-width:32ch}
/* najvise 2 kratka razlikovaca — naslovna nije /cene/ */
.txi-d{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.txi-d li{
  font-family:var(--font-m);font-size:11px;letter-spacing:.04em;line-height:1.45;
  color:var(--ink);opacity:.6;display:flex;gap:9px;align-items:baseline;
}
.txi-d li::before{content:"";width:8px;height:1px;background:var(--gold);flex:none;
  transform:translateY(-4px);opacity:.85}
/* kljucna napomena o 900 € — resava 250+600 na licu mesta */
.txi-fine{
  font-size:12.5px;line-height:1.45;color:var(--muted);margin:12px 0 0;
  padding-left:12px;border-left:1px solid var(--gold-deep);max-width:34ch;
}
.txi-fine b{color:var(--gold);font-weight:600}

.tierx-foot{
  margin-top:clamp(22px,2.6vw,38px);padding-top:clamp(16px,1.8vw,24px);
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
}
.tierx-foot p{font-size:12.5px;line-height:1.5;color:var(--dim);margin:0;max-width:58ch}

/* ── 900px: selektor je LISTA REDOVA (ime + cena), ne goli tabovi ── */
.tx-tabs{display:none}
@media (max-width:900px){
  .tierx-head{grid-template-columns:1fr;align-items:start;gap:12px}
  .tierx-head .side{text-align:left;max-width:none}
  .tierx-thread svg{height:44px}
  .tx-cap{display:none}

  .tx-tabs{
    display:flex;flex-direction:column;gap:1px;background:var(--line);
    border-block:1px solid var(--line-strong);
  }
  .tx-tab{
    appearance:none;border:0;background:var(--bg);color:inherit;font:inherit;
    padding:13px 14px 14px;cursor:pointer;text-align:left;
    display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:baseline;
    transition:background .3s var(--ease-out);
  }
  .tx-tab .t-n{grid-column:1;grid-row:1;font-family:var(--font-m);font-size:10px;
    letter-spacing:.2em;color:var(--dim)}
  .tx-tab .t-m{grid-column:2;grid-row:1;font-size:15.5px;font-weight:680;
    letter-spacing:-.015em;opacity:.72}
  .tx-tab .t-p{grid-column:2;grid-row:2;font-size:15px;font-weight:700;
    letter-spacing:-.02em;color:var(--muted);transition:color .3s var(--ease-out)}
  .tx-tab .t-c{grid-column:2;grid-row:3;font-family:var(--font-m);font-size:9px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:4px;
    display:flex;align-items:center;gap:6px}
  .tx-tab .t-c .ar{color:var(--gold);transition:transform .3s var(--ease-out)}
  .tx-tab[aria-selected="true"]{background:var(--panel);box-shadow:inset 3px 0 0 var(--gold)}
  .tx-tab[aria-selected="true"] .t-n,
  .tx-tab[aria-selected="true"] .t-p,
  .tx-tab[aria-selected="true"] .t-c{color:var(--gold)}
  .tx-tab[aria-selected="true"] .t-m{opacity:1}
  .tx-tab[aria-selected="true"] .t-c .ar{transform:rotate(180deg)}

  /* stubci: samo aktivan; broj i cena vec stoje u redu iznad */
  .tx-cols{grid-template-columns:1fr!important;grid-template-rows:none;display:block;
    border-top:0;padding-left:14px}
  .txc{display:none;padding:20px 0 2px;grid-row:auto;cursor:default}
  .txc.on{display:block;box-shadow:none;animation:txin .4s var(--ease-out) both}
  @keyframes txin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .txc + .txc::before{display:none}
  .txc::after{left:-14px;height:0}
  .txc.on::after{height:calc(100% - 10px)}
  .tx-cols .txc:not(.on){opacity:1}
  .txc-num,.txc-model,.txc-cta{display:none}
  .txc-h{font-size:clamp(22px,6.2vw,28px)}
  .txc-p{max-width:none;font-size:16px;opacity:.78;margin-bottom:0}
  .txc-hit{display:none}
  .tx-link{display:none}

  .tx-branches{margin-top:18px}
  .txb:not(.on){display:none}
  .txb.on{opacity:1;visibility:visible}
  .txb-grid{grid-template-columns:1fr}
  .txi{padding:20px 0 0}
  .txi:first-child{padding-top:0}
  .txi + .txi::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .txi.lead::after{width:20px;height:2px;top:-1px;
    background:linear-gradient(90deg,var(--gold),transparent)}
  .txi:first-child.lead::after{top:-5px}
  .txi-name{min-height:0}
  .txi-price{font-size:42px}
  .txi-price.range{font-size:30px}
  .txi-for,.txi-fine{max-width:none}
  .tierx-foot{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ============================================================
   B · FLAGSHIP — jedan rad u punoj sirini, UNUTAR #radovi

   Element je direktno dete <section>, pa je sirok koliko i ekran —
   bez 100vw trika i bez rizika od horizontalnog overflow-a.

   KOMPOZICIJA JE PODELJENA, i to je ispravka uhvacena na snimku:
   izvor je naslovna klijentovog sajta i nosi SVOJ naslov. Kad nas
   tekst legne preko njega, dva teksta se tuku i nijedno se ne cita.
   Prvo je probano zatamnjenje, pa uvelicavanje kadra — oba su i dalje
   ostavljala njegovu tipografiju ispod nase. (Ista zamka je potrosila
   jednu rundu u R01, sa Biljanom.)
   Resenje nije jaci scrim nego DRUGA KOMPOZICIJA: nasa rec stoji na
   crnom, njegov sajt se vidi ceo i nedirnut desno od nje. Posetilac
   time zapravo VIDI rad, umesto da gleda zamucenu podlogu.
   ============================================================ */
.fl{
  position:relative;
  display:grid;
  grid-template-columns:minmax(330px,38%) 1fr;
  align-items:stretch;
  background:var(--bg);
  margin-top:clamp(20px,2.6vw,44px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
/* levi panel: tekst se poravnava sa mrezom strane, ne sa ivicom ekrana */
.fl-in{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(34px,4vw,60px) clamp(26px,3vw,52px) clamp(34px,4vw,60px) var(--pad-x);
  min-height:clamp(380px,46svh,540px);
}
.fl-k{
  display:block;margin-bottom:14px;font-family:var(--font-m);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.fl-h{
  margin:0 0 14px;max-width:16ch;
  font-size:clamp(26px,2.9vw,44px);font-weight:300;line-height:1.12;
  letter-spacing:-.024em;color:var(--ink);
}
.fl-h b{font-weight:700;color:var(--gold-hi)}
.fl-p{margin:0 0 22px;max-width:40ch;font-size:14.5px;line-height:1.6;color:var(--muted)}
.fl-go{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:14px;font-weight:640;color:var(--ink);
  padding-bottom:7px;border-bottom:1px solid var(--line-strong);
  transition:border-color .2s var(--ease-out);
}
.fl-go .arw{color:var(--gold);transition:transform .2s var(--ease-out)}
.fl-go:hover{border-color:var(--gold)}
.fl-go:hover .arw{transform:translateX(4px)}

/* desna polovina: stvaran sajt, do same ivice ekrana */
.fl-shot{position:relative;overflow:clip;min-height:100%}
.fl-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:0% 0%;z-index:0;
}
/* samo mek spoj ka crnom panelu — ne prekriva sadrzaj snimka */
.fl-shot::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,5,5,.92) 0%,rgba(5,5,5,.28) 9%,rgba(5,5,5,0) 22%);
}

@media (max-width:860px){
  /* mobilna rezija je svoja: kadar gore, rec ispod, nista se ne preklapa */
  .fl{grid-template-columns:1fr;margin-top:22px}
  .fl-shot{min-height:0;aspect-ratio:4/3;order:1}
  .fl-in{order:2;min-height:0;padding:26px var(--pad-x) 30px}
  .fl-h{max-width:none;font-size:clamp(24px,6.6vw,32px)}
  .fl-p{max-width:none}
  .fl-shot::after{
    background:linear-gradient(180deg,rgba(5,5,5,0) 62%,rgba(5,5,5,.9) 100%);
  }
}

/* ============================================================
   C · SAZIMANJE — mrtvo crno, ne cinematic tenzija
   Skraćuje se SAMO prazan prostor oko sadrzaja; nijedna scena
   (hero, 404 ploca, finale) ne gubi svoju visinu.
   ============================================================ */
/* showroom: ~560 px praznog iznad naslova i ~600 px ispod uredjaja */
.chapter.showroom{padding-block:clamp(48px,5.4vw,88px)}
.chapter.showroom .works-more{margin-top:clamp(22px,2.6vw,40px)}
/* poglavlje „kako pocinjete" je najduze bez scene */
.chapter.journey{padding-block:clamp(52px,5.8vw,92px)}
/* dokaz + cene */
.chapter.proof{padding-block:clamp(48px,5.4vw,84px)}
/* provere */
.chapter.checks{padding-block:clamp(44px,5vw,78px)}

/* ============================================================
   D · #ponuda — cene se ne ponavljaju u punoj snazi
   Sidra 250 · 600 · 900 stoje gore u DUBINI. Ovde ostaje
   transparentnost (jedan red + 0 €) i CTA ka /cene/.
   Stara .price-rail se NE brise iz HTML-a nego se sklanja,
   da povratak bude jedan red CSS-a.
   ============================================================ */
.chapter.proof .price-rail{display:none}
.px-recap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;
  margin:0 0 14px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.px-recap .r-k{
  font-family:var(--font-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);
}
.px-recap .r-v{
  font-size:clamp(19px,1.7vw,26px);font-weight:760;letter-spacing:-.028em;color:var(--gold);
}
.px-recap .r-n{font-size:13px;line-height:1.5;color:var(--muted);margin:0}
@media (max-width:700px){
  .px-recap{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .tx-cols,.txc,.txc::after,.tx-link::after,.txb,.txc-cta .ar,.tx-tab .t-c .ar{
    transition-duration:.001ms!important;animation-duration:.001ms!important;
  }
}