/* ==========================================================================
   Građevinska bravarija A Tim Miloš | main.css
   Koncept „Minijum“: osnovni premaz koji se ne vidi, a od njega zavisi trajanje.
   Motivi: preseci čeličnih profila, varni šav (aktivno stanje), minijum traka uz ivicu fotografije,
   natpisna pločica sa zakovicama (logo), dugme „ankerna ploča“ sa dve glave šrafa.
   WP: wp_enqueue_style('atim-main', get_theme_file_uri('assets/css/main.css'))
   ========================================================================== */

:root{
  --cink:#ECEEEC; --cink-2:#E1E4E2; --cink-3:#D3D8D6; --papir:#FAFAF8; --white:#fff;
  --antracit:#373F43; --antracit-2:#2B3235; --antracit-3:#20262A;
  --ink:#15191B; --ink-2:#3B4448; --ink-3:#586266; --celik:#7C878C;
  --min:#B0442A; --min-d:#8E3420; --min-l:#F4E2DB; --min-on-dark:#EF9C86;
  --err:#B42318; --ok:#2F6B4F; --todo-bg:#FFE9A8; --todo-fg:#4D3A00;
  --line:rgba(21,25,27,.14); --line-2:rgba(21,25,27,.24); --line-d:rgba(236,238,236,.16);
  --fd:'Funnel Display', 'Public Sans', system-ui, sans-serif;
  --fb:'Public Sans', system-ui, sans-serif;
  --e:cubic-bezier(.22,.8,.2,1); --e2:cubic-bezier(.32,.72,0,1);
  --hdr:76px; --gut:clamp(16px, 4vw, 40px); --max:1320px;
  --sec:clamp(72px, 9vw, 132px);
}

/* ---------- osnova ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 20px)}
body{margin:0; background:var(--cink); color:var(--ink); font:400 17px/1.6 var(--fb); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip}
/* zrno pocinkovane površine: samo fiksni pseudo-element, ne skroluje */
body::after{content:''; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[hidden]{display:none !important}
img{display:block; max-width:100%; height:auto}
figure{margin:0}
a{color:inherit; text-decoration-thickness:1px; text-underline-offset:3px}
button{font:inherit; color:inherit; cursor:pointer}
a,button,input,select,textarea,label{touch-action:manipulation; -webkit-tap-highlight-color:rgba(176,68,42,.15)}
h1,h2,h3,h4{font-family:var(--fd); margin:0; text-wrap:balance; font-weight:650; letter-spacing:-.015em}
h1{font-size:clamp(40px, 5.2vw, 76px); line-height:.98; font-weight:700; letter-spacing:-.025em}
h2{font-size:clamp(30px, 3.4vw, 50px); line-height:1.04; max-width:22ch}
h3{font-size:clamp(20px, 1.6vw, 24px); line-height:1.15}
h4{font-size:17px; line-height:1.25; font-weight:600}
p{margin:0 0 1em; text-wrap:pretty}
p:last-child{margin-bottom:0}
ul,ol{margin:0; padding:0}
.lead{font-size:clamp(18px, 1.35vw, 20px); line-height:1.55; color:var(--ink-2); max-width:58ch}
.wrap{width:100%; max-width:calc(var(--max) + 2 * var(--gut)); margin-inline:auto; padding-inline:var(--gut)}
.sec{padding-block:var(--sec); position:relative}
.sec--tight{padding-block:clamp(40px, 5vw, 64px) var(--sec)}
.skip{position:absolute; left:-9999px; top:8px; z-index:200; background:var(--ink); color:#fff; padding:10px 16px}
.skip:focus{left:8px}
:focus-visible{outline:2.5px solid var(--min); outline-offset:3px}
.i{width:20px; height:20px; flex:none}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- oznake ---------- */
.todo{display:inline-block; background:var(--todo-bg); color:var(--todo-fg); font:600 12px/1.5 var(--fb); letter-spacing:.01em; padding:1px 7px; border-radius:2px; vertical-align:.12em; max-width:100%}
.ilu{position:absolute; top:10px; right:10px; z-index:2; background:rgba(21,25,27,.72); color:#fff; font:600 10.5px/1 var(--fb); letter-spacing:.08em; text-transform:uppercase; padding:5px 8px; pointer-events:none}
.mark{display:inline-flex; align-items:center; gap:10px; margin:0 0 22px; font:600 13px/1.2 var(--fb); letter-spacing:.08em; text-transform:uppercase; color:var(--min)}
.mark a{color:inherit; text-decoration:none}
.mark a:hover{text-decoration:underline}
.mark span{color:var(--ink-3)}
.mark .prof,.mark__prof{width:20px; height:20px}

/* profil: presek (puni) i veliki obris (hairline) */
.prof{width:22px; height:22px; flex:none; fill:currentColor}
.pbig{position:absolute; pointer-events:none; fill:var(--pf, rgba(21,25,27,.045)); stroke:none; overflow:visible}

/* minijum: traka osnovnog premaza uz levu ivicu fotografije */
.primed{position:relative; overflow:hidden; background:var(--cink-3)}
.primed::before{content:''; position:absolute; z-index:1; left:0; top:0; bottom:0; width:7px; background:var(--min); transition:width .6s var(--e)}
.primed img{width:100%; height:100%; object-fit:cover}

/* ---------- dugme „Ankerna ploča“ ---------- */
.btn{--bg:var(--min); --fg:#fff; --bd:var(--min); --bolt:#E8B5A6; --slot:rgba(40,12,5,.6);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 46px; background:var(--bg); color:var(--fg); border:1.5px solid var(--bd); border-radius:2px;
  font:650 16px/1.15 var(--fb); letter-spacing:.01em; text-decoration:none; text-align:center; cursor:pointer;
  transition:background-color .35s var(--e), color .35s var(--e), border-color .35s var(--e), transform .15s var(--e)}
.btn::before,.btn::after{content:''; position:absolute; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%;
  background:linear-gradient(var(--slot), var(--slot)) 50% 50% / 72% 1.6px no-repeat, radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), transparent 62%), var(--bolt);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22); transition:transform .6s var(--e2)}
.btn::before{left:15px; transform:rotate(24deg)}
.btn::after{right:15px; transform:rotate(-38deg)}
.btn:hover{--bg:var(--min-d); --bd:var(--min-d)}
.btn:hover::before{transform:rotate(114deg)}
.btn:hover::after{transform:rotate(52deg)}
.btn:active{transform:translateY(1px)}
.btn--line{--bg:transparent; --fg:var(--ink); --bd:var(--ink); --bolt:var(--cink-3); --slot:rgba(21,25,27,.55)}
.btn--line:hover{--bg:var(--ink); --fg:#fff; --bd:var(--ink); --bolt:#8D979B}
.btn--dark{--bg:var(--antracit-3); --bd:var(--antracit-3); --bolt:#8D979B; --slot:rgba(0,0,0,.6)}
.btn--dark:hover{--bg:#000; --bd:#000}
.btn--light{--bg:var(--cink); --fg:var(--ink); --bd:var(--cink); --bolt:var(--min); --slot:rgba(40,12,5,.7)}
.btn--light:hover{--bg:#fff; --bd:#fff}
.btn--sm{min-height:44px; padding:0 38px; font-size:15px}
.btn--sm::before{left:13px}.btn--sm::after{right:13px}
.btn--sm::before,.btn--sm::after{width:8px; height:8px; margin-top:-4px}

/* telefon kao ploča sa ikonom */
.tel{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:700 18px/1 var(--fd); letter-spacing:.01em; font-variant-numeric:tabular-nums; white-space:nowrap}
.tel--plate{min-height:54px; padding:0 20px; border:1.5px solid var(--ink); border-radius:2px; transition:background-color .3s var(--e), color .3s var(--e)}
.tel--plate:hover{background:var(--ink); color:#fff}
.tel--plate .i{color:var(--min)}
.tel--plate:hover .i{color:var(--min-on-dark)}
.tel--inline{font-size:inherit; gap:6px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.tel--inline .i{width:17px; height:17px; color:var(--min)}
.tel--big{font-size:24px; min-height:64px; width:100%; justify-content:center}

/* tekstualni link sa varnim šavom */
.tlink{display:inline-flex; align-items:center; gap:8px; font-weight:650; text-decoration:none; position:relative; padding-bottom:6px}
.tlink::after,.weld::after{content:''; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:radial-gradient(ellipse 2.1px 2.5px at 50% 50%, var(--min) 88%, transparent 100%) 0 0 / 3.4px 5px repeat-x;
  transform:scaleX(.18); transform-origin:left; transition:transform .55s var(--e)}
.tlink:hover::after{transform:scaleX(1)}
.tlink .i{transition:transform .4s var(--e)}
.tlink:hover .i{transform:translateX(4px)}

/* email: klik kopira adresu */
.copy-mail{display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:0; text-align:left; font:inherit; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; word-break:break-all}
.copy-mail .i{width:16px; height:16px; color:var(--min)}
.copy-mail.is-copied{color:var(--ok); text-decoration:none}
.copy-mail--inline{display:inline; font-weight:600}
.copy-mail--inline .i{display:inline; vertical-align:-3px; margin-left:4px}

/* ==========================================================================
   Header: natpisna pločica sa zakovicama visi ispod trake
   ========================================================================== */
.hdr{position:sticky; top:0; z-index:60; height:var(--hdr); background:rgba(236,238,236,.9); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 1px 0 var(--line)}
.hdr__bar{height:100%; max-width:calc(var(--max) + 2 * var(--gut)); margin:0 auto; padding-inline:var(--gut); display:flex; align-items:center; gap:clamp(12px, 1.6vw, 28px)}
.plate{--rv:radial-gradient(circle, #9AA3A7 0 1.6px, #20262A 1.8px 2.3px, transparent 2.5px);
  position:relative; align-self:flex-start; margin-top:12px; margin-bottom:-30px; flex:none; display:grid; gap:6px; padding:16px 20px 17px; min-width:168px;
  background:var(--rv) 7px 7px / 6px 6px no-repeat, var(--rv) calc(100% - 7px) 7px / 6px 6px no-repeat, var(--rv) 7px calc(100% - 7px) / 6px 6px no-repeat, var(--rv) calc(100% - 7px) calc(100% - 7px) / 6px 6px no-repeat, linear-gradient(160deg, #414A4F, var(--antracit) 45%, var(--antracit-2));
  color:#fff; text-decoration:none; box-shadow:0 18px 30px -18px rgba(21,25,27,.55), inset 0 1px 0 rgba(255,255,255,.1);
  transform-origin:top left; transition:transform .5s var(--e2), box-shadow .5s var(--e); z-index:61}
.plate::after{content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--min)}
.plate__n{font:800 32px/.9 var(--fd); letter-spacing:.02em}
.plate__s{font:600 10.5px/1.35 var(--fb); letter-spacing:.09em; text-transform:uppercase; color:#C6CDCB}
.hdr.is-scrolled .plate{transform:translateY(-8px) scale(.82); box-shadow:0 10px 20px -14px rgba(21,25,27,.5)}

.nav{margin-left:auto}
.menu{list-style:none; display:flex; align-items:center; gap:2px}
.menu-item a{position:relative; display:flex; align-items:center; gap:8px; height:var(--hdr); padding:0 12px; text-decoration:none; font:600 15px/1 var(--fb); color:var(--ink-2); white-space:nowrap; transition:color .25s var(--e)}
.menu-item a .prof{width:17px; height:17px; color:var(--celik); transition:color .25s var(--e), transform .45s var(--e2)}
.menu-item a::after{content:''; position:absolute; left:12px; right:12px; bottom:18px; height:5px;
  background:radial-gradient(ellipse 2.1px 2.5px at 50% 50%, var(--min) 88%, transparent 100%) 0 0 / 3.4px 5px repeat-x;
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e)}
.menu-item a:hover{color:var(--ink)}
.menu-item a:hover::after{transform:scaleX(.35)}
.menu-item a:hover .prof{color:var(--min); transform:rotate(90deg)}
.menu-item.current-menu-item a{color:var(--ink)}
.menu-item.current-menu-item a::after{transform:scaleX(1)}
.menu-item.current-menu-item a .prof{color:var(--min)}
.menu-item--last{margin-right:10px; padding-right:12px; box-shadow:1px 0 0 var(--line-2)}
.menu-item--last a{height:34px}
.menu-item--last a::after{bottom:-3px}
.menu-item--svc a{height:34px}
.menu-item--svc a::after{bottom:-3px}
.menu-item:not(.menu-item--svc) a{height:34px}
.menu-item:not(.menu-item--svc) a::after{bottom:-3px}
.hdr__act{display:flex; align-items:center; gap:16px; flex:none}
.hdr__tel{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font:700 16px/1 var(--fd); font-variant-numeric:tabular-nums; white-space:nowrap}
.hdr__tel .i{color:var(--min)}
.hdr__tel:hover span{text-decoration:underline; text-underline-offset:4px}
.hdr__cta.is-current{--bg:var(--ink); --bd:var(--ink); --bolt:#8D979B}
.burger{display:none; margin-left:auto; align-items:center; gap:10px; height:44px; padding:0 14px 0 12px; background:var(--ink); color:#fff; border:0; border-radius:2px; font:600 14px/1 var(--fb)}
.burger i{display:block; width:18px; height:2px; background:currentColor; position:relative; transition:transform .45s var(--e2)}
.burger i + i{position:absolute; margin-top:0}
.burger{position:relative}
.burger i:first-child{transform:translateY(-3px)}
.burger i + i{left:12px; transform:translateY(3px)}
body.menu-open .burger i:first-child{transform:rotate(45deg)}
body.menu-open .burger i + i{transform:rotate(-45deg)}
.mnav{display:none}

@media (max-width:1360px){
  .hdr__tel span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .hdr__tel{width:44px; height:44px; justify-content:center; border:1.5px solid var(--line-2); border-radius:2px}
  .menu-item a{padding:0 9px}
  .menu-item a::after{left:9px; right:9px}
}
@media (max-width:1180px){
  .nav,.hdr__cta{display:none}
  .burger{display:inline-flex}
  .hdr__act{margin-left:auto}
  .hdr__tel{border-color:var(--ink)}
  /* header ima backdrop-filter, pa je on okvir za fixed: zato eksplicitna visina umesto bottom:0 */
  .mnav{position:fixed; top:var(--hdr); left:0; right:0; height:calc(100dvh - var(--hdr)); overflow:auto; overscroll-behavior:contain; background:var(--cink); border-top:1px solid var(--line); z-index:59}
  body.menu-open{overflow:hidden}
  body.menu-open .mnav{display:block}
  .mnav__in{max-width:640px; margin:0 auto; padding:48px var(--gut) 120px}
  .mnav__h{font:600 12px/1 var(--fb); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px}
  .mnav__svc,.mnav__co{list-style:none; margin-bottom:32px}
  .mnav__svc a{display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none}
  .mnav__svc .prof{width:28px; height:28px; color:var(--min)}
  .mnav__svc b{display:block; font:650 21px/1.2 var(--fd)}
  .mnav__svc small{display:block; color:var(--ink-3); font-size:14px}
  .mnav__co a{display:block; padding:12px 0; font:600 19px/1.2 var(--fd); text-decoration:none; border-bottom:1px solid var(--line)}
  .mnav a[aria-current="page"] b,.mnav__co a[aria-current="page"]{color:var(--min)}
  .mnav__act{display:grid; gap:12px}
  .mnav__act .tel{justify-content:center}
  body.menu-open .mnav__in > *{animation:rise .55s var(--e) both}
  body.menu-open .mnav__in > :nth-child(2){animation-delay:.04s}
  body.menu-open .mnav__in > :nth-child(3){animation-delay:.08s}
  body.menu-open .mnav__in > :nth-child(4){animation-delay:.12s}
  body.menu-open .mnav__in > :nth-child(5){animation-delay:.16s}
}
@media (max-width:560px){
  :root{--hdr:66px}
  .plate{min-width:0; padding:12px 14px 13px; margin-top:9px; margin-bottom:-22px}
  .plate__n{font-size:25px}
  .plate__s{font-size:9px}
  .burger span{display:none}
  .burger{padding:0 13px}
  .burger i + i{left:13px}
}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

/* breadcrumbs (Yoast) */
.crumbs{padding-top:56px; font-size:14px; color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal; margin:0 6px; color:var(--celik)}
.crumbs .breadcrumb_last{color:var(--ink)}

/* ---------- zajednički naslovi sekcija ---------- */
.shead{display:grid; gap:16px 48px; margin-bottom:clamp(36px, 4vw, 56px); grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); align-items:end}
.shead h2{grid-column:1}
.shead__p{color:var(--ink-3); max-width:44ch; margin:0}
.shead--row{grid-template-columns:1fr auto}
.shead > .btn{justify-self:end}
@media (max-width:800px){
  .shead,.shead--row{grid-template-columns:1fr}
  .shead > .btn{justify-self:start}
}

/* reveal */
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s var(--e) var(--d, 0ms), transform .9s var(--e) var(--d, 0ms)}
.rv.in,.no-js .rv{opacity:1; transform:none}

/* ==========================================================================
   Početna: hero
   ========================================================================== */
.hero{position:relative; min-height:min(900px, calc(100svh - var(--hdr))); display:grid; grid-template-rows:1fr auto; padding-bottom:0}
.hero__media{position:absolute; top:0; right:0; bottom:58px; width:56%}
.hero__media img{width:100%; height:100%; object-fit:cover}
.hero__big{width:min(760px, 64vw); left:-260px; top:10px; aspect-ratio:1; --pf:rgba(21,25,27,.04)}
.hero__in{position:relative; display:flex; align-items:center; padding-top:clamp(84px, 9vw, 120px); padding-bottom:clamp(60px, 7vw, 110px)}
.hero__t{width:min(600px, 40%)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hero h1 .h1__sub{display:block; margin-top:.4em; font-size:.46em; line-height:1.12; font-weight:500; letter-spacing:-.01em; color:var(--ink-2)}
.hero .lead{margin-top:26px}
.hero__a{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero__call{margin-top:18px; color:var(--ink-3)}
.quick{position:relative; z-index:3}
.quick ul{list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); background:var(--papir); box-shadow:0 30px 60px -36px rgba(21,25,27,.45), 0 0 0 1px var(--line)}
.quick li + li{box-shadow:-1px 0 0 var(--line)}
.quick a{display:flex; align-items:center; gap:14px; padding:22px 22px; text-decoration:none; position:relative; transition:background-color .3s var(--e)}
.quick a::before{content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--min); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e)}
.quick a:hover{background:#fff}
.quick a:hover::before{transform:scaleX(1)}
.quick .prof{width:32px; height:32px; color:var(--antracit); transition:color .3s, transform .6s var(--e2)}
.quick a:hover .prof{color:var(--min); transform:rotate(90deg)}
.quick b{display:block; font:650 18px/1.2 var(--fd)}
.quick small{display:block; font-size:14px; color:var(--ink-3)}
@media (max-width:1000px){
  .hero{min-height:0}
  .hero__media{position:relative; bottom:auto; width:100%; aspect-ratio:4/3; order:2}
  .hero__in{order:1; padding-top:64px; padding-bottom:36px}
  .hero__t{width:100%}
  .quick{order:3; margin-top:-40px}
  .quick ul{grid-template-columns:1fr 1fr}
  .quick li:nth-child(3){box-shadow:0 -1px 0 var(--line)}
  .quick li:nth-child(4){box-shadow:-1px 0 0 var(--line), 0 -1px 0 var(--line)}
}
@media (max-width:560px){
  .hero__in{padding-top:52px}
  .hero__a .btn{flex:1 1 100%}
  .quick{padding-inline:12px}
  .quick a{padding:16px 12px; gap:10px}
  .quick .prof{width:24px; height:24px}
  .quick b{font-size:15.5px}
  .quick small{font-size:12.5px}
}

/* ==========================================================================
   Početna: grupe radova (velike fotografije) + zaseban blok krovovi i limarija
   ========================================================================== */
.groups__grid{display:grid; grid-template-columns:repeat(12, 1fr); grid-auto-rows:clamp(240px, 24vw, 330px); gap:20px}
.grp{position:relative; display:block; text-decoration:none; color:var(--ink); grid-column:span 5}
.grp--0{grid-column:span 7; grid-row:span 2}
.grp__img{position:absolute; inset:0}
.grp__img img{transition:transform 1.2s var(--e)}
.grp:hover .grp__img img{transform:scale(1.04)}
.grp:hover .primed::before{width:14px}
.grp__b{position:absolute; z-index:2; left:28px; bottom:-1px; right:28px; max-width:430px; display:grid; gap:4px; padding:22px 24px 20px; background:var(--papir); box-shadow:0 20px 40px -26px rgba(21,25,27,.5)}
.grp__prof{width:30px; height:30px; color:var(--min); margin-bottom:6px; transition:transform .6s var(--e2)}
.grp:hover .grp__prof{transform:rotate(90deg)}
.grp__n{font:650 clamp(22px, 1.9vw, 28px)/1.1 var(--fd); letter-spacing:-.015em}
.grp__d{font-size:15px; color:var(--ink-3)}
.grp__go{display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-weight:650; font-size:15px; position:relative; padding-bottom:6px; width:max-content}
.grp__go::after{content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:radial-gradient(ellipse 2.1px 2.5px at 50% 50%, var(--min) 88%, transparent 100%) 0 0 / 3.4px 5px repeat-x; transform:scaleX(.18); transform-origin:left; transition:transform .55s var(--e)}
.grp:hover .grp__go::after{transform:scaleX(1)}
.grp--1 .grp__b,.grp--2 .grp__b{left:20px; right:auto; max-width:360px}
@media (max-width:900px){
  .groups__grid{grid-template-columns:1fr; grid-auto-rows:auto}
  .grp,.grp--0{grid-column:auto; grid-row:auto}
  .grp__img{position:relative; inset:auto; aspect-ratio:4/3}
  .grp--0 .grp__img{aspect-ratio:3/4; max-height:560px}
  .grp__b,.grp--1 .grp__b,.grp--2 .grp__b{position:relative; left:auto; right:auto; bottom:auto; max-width:none; margin:-48px 14px 0}
}

.lim{margin-top:clamp(56px, 6vw, 88px); display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:0; background:var(--papir); box-shadow:0 0 0 1px var(--line)}
.lim__img{min-height:360px}
.lim__t{padding:clamp(28px, 4vw, 52px)}
.lim__t h3{font-size:clamp(26px, 2.4vw, 36px); margin-bottom:14px; max-width:20ch}
.lim__t > p{color:var(--ink-2); max-width:56ch}
.lim__l{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px}
.lim__l li{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; background:var(--cink); font-weight:600; font-size:15px}
.type__tag{display:inline-block; font:650 11px/1 var(--fb); letter-spacing:.07em; text-transform:uppercase; padding:4px 6px; background:var(--antracit); color:#fff; border-radius:2px}
.lim__l li:nth-child(-n+2) .type__tag,.type:nth-child(-n+2) .type__tag{background:#5F696D}
@media (max-width:800px){
  .lim{grid-template-columns:1fr}
  .lim__img{min-height:0; aspect-ratio:16/10}
}

/* ==========================================================================
   Početna: izvedeni radovi na „šini“, kao klizna kapija. Kartice vise o čeličnu šinu preko dva točkića
   i klize vodoravno; šina ide preko cele širine ekrana, a lista počinje od leve ivice sadržaja.
   ========================================================================== */
.work-home{overflow:hidden}
.rail{--in:max(var(--gut), calc((100vw - var(--max)) / 2)); position:relative}
.rail__bar{position:absolute; left:0; right:0; top:5px; height:14px;
  background:linear-gradient(var(--antracit-2), var(--antracit-2)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--antracit-2), var(--antracit-2)) 0 100% / 100% 3px no-repeat, linear-gradient(180deg, #6B7579, #8D979B 45%, #5A6468)}
.rail__list{list-style:none; display:flex; align-items:flex-start; gap:clamp(18px, 2vw, 28px); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--in); padding:0 var(--in) 28px; scrollbar-width:none; cursor:grab; position:relative}
.rail__list::-webkit-scrollbar{display:none}
.rail__list.is-drag{cursor:grabbing; scroll-snap-type:none; user-select:none}
.rail__list.is-drag a{pointer-events:none}
.rail__list:focus-visible{outline-offset:-3px}
.rcard{flex:0 0 clamp(300px, 34vw, 470px); scroll-snap-align:start; padding-top:40px}
.rcard--w{flex-basis:clamp(320px, 44vw, 620px)}
.rcard__a{position:relative; display:flex; flex-direction:column; height:100%; background:var(--papir); color:var(--ink); text-decoration:none; box-shadow:0 0 0 1px var(--line), 0 30px 60px -44px rgba(21,25,27,.55); transform-origin:50% -12px; transition:transform .6s var(--e2), box-shadow .5s var(--e)}
/* vešanje: dve vertikalne spojnice od šine do kartice, sa točkićima na šini */
.rcard__hang{position:absolute; left:0; right:0; top:-40px; height:40px; pointer-events:none}
.rcard__hang i{position:absolute; top:12px; width:3px; height:28px; background:var(--antracit-2)}
.rcard__hang i:first-child{left:22%}.rcard__hang i:last-child{right:22%}
.rcard__hang i::before{content:''; position:absolute; left:50%; top:-10px; width:20px; height:20px; margin-left:-10px; border-radius:50%;
  background:radial-gradient(circle, #20262A 0 3px, transparent 3.5px), radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 60%), #B7BFC2;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35); transition:transform .8s var(--e2)}
.rcard__a:hover{transform:translateX(6px) rotate(.6deg); box-shadow:0 0 0 1px var(--line-2), 0 36px 60px -40px rgba(21,25,27,.6)}
.rcard__a:hover .rcard__hang i::before{transform:rotate(180deg)}
.rail.is-moving .rcard__hang i::before{transform:rotate(var(--roll, 0deg))}
.rcard__img{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--cink-3)}
.rcard--w .rcard__img{aspect-ratio:16/10}
.rcard__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e)}
.rcard__a:hover .rcard__img img{transform:scale(1.04)}
.rcard__img::after{content:''; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--min)}
.rcard__no{position:absolute; left:14px; bottom:18px; z-index:2; font:800 clamp(40px, 4vw, 60px)/.8 var(--fd); color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35); letter-spacing:-.03em}
.rcard__b{display:flex; flex-direction:column; gap:12px; padding:clamp(20px, 2.2vw, 30px)}
.rcard__cat{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font:600 12.5px/1.2 var(--fb); letter-spacing:.08em; text-transform:uppercase; color:var(--min)}
.rcard__cat > span{color:var(--ink-3)}
.rcard__prof{width:18px; height:18px}
.rcard__t{display:block; font:650 clamp(21px, 1.8vw, 27px)/1.12 var(--fd); letter-spacing:-.015em; max-width:22ch}
.rcard__zr{display:grid; gap:10px; font-size:15.5px; color:var(--ink-2)}
.rcard--w .rcard__zr{grid-template-columns:1fr 1fr; gap:22px}
.rcard__zr b{display:block; font:650 11.5px/1 var(--fb); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; padding-top:10px; border-top:3px solid var(--antracit)}
.rcard__zr span + span b{border-top-color:var(--min)}
.rcard__go{display:inline-flex; align-items:center; gap:8px; margin-top:4px; font-weight:650; font-size:15px; position:relative; padding-bottom:6px; align-self:flex-start}
.rcard__go::after{content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:radial-gradient(ellipse 2.1px 2.5px at 50% 50%, var(--min) 88%, transparent 100%) 0 0 / 3.4px 5px repeat-x; transform:scaleX(.18); transform-origin:left; transition:transform .55s var(--e)}
.rcard__a:hover .rcard__go::after{transform:scaleX(1)}
.rcard--end{flex-basis:clamp(260px, 24vw, 340px)}
.rcard--end .rcard__a{background:var(--min); color:#fff; min-height:clamp(380px, 34vw, 480px)}
.rcard__endb{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; height:100%; padding:clamp(22px, 2.4vw, 32px)}
.rcard__endp{color:#FBE7E1; font-size:15.5px}
.rcard--end .rcard__go::after{background-image:radial-gradient(ellipse 2.1px 2.5px at 50% 50%, #fff 88%, transparent 100%)}
.rcard__big{width:300px; aspect-ratio:1; right:-80px; top:-60px; --pf:rgba(255,255,255,.12)}
.rail__ctl{display:flex; align-items:center; gap:10px; margin-top:6px}
.rail__prog{flex:1; height:5px; background:var(--cink-3); margin-right:14px; overflow:hidden}
.rail__prog i{display:block; height:100%; background:var(--min); transform-origin:left; transform:scaleX(var(--p, .2)); transition:transform .25s var(--e)}
.rail__count{font:600 15px/1 var(--fd); font-variant-numeric:tabular-nums; margin-right:6px}
@media (max-width:760px){
  .rcard,.rcard--w{flex-basis:84vw}
  .rcard--end{flex-basis:70vw}
  .rcard--w .rcard__img{aspect-ratio:4/3}
  .rcard--w .rcard__zr{grid-template-columns:1fr; gap:10px}
  .rcard__a:hover{transform:none}
  .rail__list{cursor:auto}
}
@media (prefers-reduced-motion:reduce){.rcard__a:hover{transform:none}}

/* ==========================================================================
   Saradnja u 6 koraka: I-nosač sa zavrtnjima
   ========================================================================== */
.beam{position:relative}
.beam__bar{position:absolute; left:0; right:0; top:12px; height:18px; background:linear-gradient(var(--antracit-2), var(--antracit-2)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--antracit-2), var(--antracit-2)) 0 100% / 100% 3px no-repeat, linear-gradient(90deg, #5A6468, #7C878C 40%, #5A6468); overflow:hidden}
.beam__bar i{position:absolute; inset:3px 0; background:var(--min); transform:scaleX(var(--p, 0)); transform-origin:left; transition:transform .2s linear}
.steps{list-style:none; display:grid; grid-template-columns:repeat(6, 1fr); gap:24px; position:relative}
.step{position:relative; padding-top:62px; display:flex; flex-direction:column}
.step__bolt{position:absolute; top:5px; left:0; width:32px; height:32px; border-radius:50%;
  background:linear-gradient(rgba(21,25,27,.7), rgba(21,25,27,.7)) 50% 50% / 64% 2.5px no-repeat, radial-gradient(circle at 35% 30%, rgba(255,255,255,.65), transparent 60%), #C3CACB;
  box-shadow:0 0 0 3px var(--cink), inset 0 0 0 1.5px rgba(0,0,0,.25); transform:rotate(-50deg); transition:transform 1s var(--e2) var(--d, 0ms), background-color .4s}
.step.in .step__bolt{transform:rotate(40deg)}
.proc .step.in .step__bolt,.step.in .step__bolt{background-color:#E6A895}
.step__no{display:block; font:700 13px/1 var(--fd); letter-spacing:.06em; color:var(--min); margin-bottom:10px; font-variant-numeric:tabular-nums}
.step__t{font-size:20px; margin-bottom:8px}
.step p{font-size:15.5px; color:var(--ink-2); margin:0 0 12px}
.step .step__n{margin-top:auto; padding-top:10px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink); font-weight:550}
.steps__note{margin-top:36px; font-size:14.5px; color:var(--ink-3)}
@media (max-width:1100px){.steps{grid-template-columns:repeat(3, 1fr); row-gap:40px}.beam__bar{display:none}.step{padding-top:50px}.step__bolt{top:0}}
@media (max-width:640px){
  .beam__bar{display:block; left:14px; right:auto; top:0; bottom:0; width:10px; height:auto; background:linear-gradient(90deg, var(--antracit-2) 2px, #7C878C 2px 8px, var(--antracit-2) 8px)}
  .beam__bar i{inset:0 2px; transform:scaleY(var(--p, 0)); transform-origin:top}
  .steps{grid-template-columns:1fr; row-gap:28px}
  .step{padding:0 0 0 56px}
  .step__bolt{left:3px; top:-4px}
}

/* ==========================================================================
   Materijali i zaštita (tamna sekcija; iza nje ide svetla forma, pa footer)
   ========================================================================== */
.mat{background:var(--antracit); color:var(--cink); overflow-x:clip}
.mat__in{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:40px clamp(32px, 5vw, 80px); align-items:center}
.mat h2{color:#fff; margin-bottom:22px}
.mat p{color:#C7CECC; max-width:52ch}
.layers{list-style:none; display:grid; gap:0; perspective:900px}
.layers__i{display:flex; align-items:baseline; gap:14px; padding:18px 22px; min-height:70px; color:#fff; position:relative; transform-origin:left center; transition:transform .9s var(--e) var(--d, 0ms)}
.layers__i b{font:650 19px/1.2 var(--fd); min-width:9em}
.layers__i span{font-size:15px; opacity:.9}
.layers__i--4{margin-left:30%; background:linear-gradient(180deg, #2A3033, #1F2427); box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.layers__i--3{margin-left:20%; background:var(--min)}
.layers__i--2{margin-left:10%; background:repeating-linear-gradient(95deg, #8D979B 0 2px, #9AA3A7 2px 5px); color:var(--ink)}
.layers__i--1{background:linear-gradient(180deg, #5F696D, #4B5458); box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.layers:not(.in) .layers__i{transform:translateX(24px)}
.layers.in .layers__i--3{--d:80ms}.layers.in .layers__i--2{--d:160ms}.layers.in .layers__i--1{--d:240ms}
.mat__d{grid-column:1 / -1; list-style:none; display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:24px; margin-top:clamp(24px, 4vw, 56px); align-items:start}
.mat__d li:nth-child(2){margin-top:56px}
.mat__d li:nth-child(3){margin-top:112px}
.mat__d figure{aspect-ratio:4/3; margin-bottom:16px}
.mat__d li:first-child figure{aspect-ratio:16/11}
.mat__d h3{color:#fff; font-size:20px; margin-bottom:6px}
.mat__d p{font-size:15.5px}
.mat .ilu{background:rgba(0,0,0,.6)}
@media (max-width:900px){
  .mat__in{grid-template-columns:minmax(0, 1fr)}
  .layers__i{flex-direction:column; gap:4px; align-items:flex-start}
  .layers__i--4{margin-left:18%}.layers__i--3{margin-left:12%}.layers__i--2{margin-left:6%}
  .mat__d{grid-template-columns:1fr}
  .mat__d li:nth-child(n){margin-top:0}
}

/* ==========================================================================
   Brzi upit + forma (WPForms markup)
   ========================================================================== */
.upit{background:var(--cink)}
.upit__in{display:grid; grid-template-columns:minmax(0, 4.3fr) minmax(0, 7.7fr); gap:clamp(32px, 5vw, 80px); align-items:start}
.upit__t{position:sticky; top:calc(var(--hdr) + 32px)}
.upit__t h2{margin-bottom:18px}
.upit__t > p{color:var(--ink-2)}
.upit__l{list-style:none; margin:28px 0; display:grid; gap:0; counter-reset:u}
.upit__l li{display:grid; grid-template-columns:28px 7.5em 1fr; gap:10px; padding:12px 0; border-top:1px solid var(--line); font-size:15.5px; color:var(--ink-2); counter-increment:u}
.upit__l li::before{content:counter(u, decimal-leading-zero); font:700 13px/1.6 var(--fd); color:var(--min)}
.upit__l b{color:var(--ink)}
.upit__c p{margin-bottom:10px; color:var(--ink-3)}
@media (max-width:980px){.upit__in{grid-template-columns:minmax(0, 1fr)}.upit__t{position:static}}
@media (max-width:480px){.upit__l li{display:block}.upit__l li::before{display:inline-block; width:28px}.upit__l b::after{content:':'}}

.upit__f,.kontakt__f{background:var(--papir); box-shadow:0 0 0 1px var(--line), 0 40px 80px -50px rgba(21,25,27,.4); padding:clamp(20px, 3vw, 40px); position:relative}
.upit__f::before,.kontakt__f::before{content:''; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--min)}
.preview{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 24px; padding:10px 12px; background:var(--todo-bg); color:var(--todo-fg); font-size:13px; font-weight:600}
.preview__seg{display:flex; flex-wrap:wrap; gap:4px}
.preview__seg button{border:1px solid rgba(77,58,0,.3); background:transparent; padding:6px 10px; font-size:13px; font-weight:600; border-radius:2px; color:var(--todo-fg)}
.preview__seg button[aria-pressed="true"]{background:var(--todo-fg); color:#fff; border-color:var(--todo-fg)}

.atim-form{position:relative}
.wpforms-page-indicator{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:26px; font-size:14px; color:var(--ink-3)}
.wpforms-page-indicator-page-title{font:650 20px/1.2 var(--fd); color:var(--ink)}
.wpforms-page-indicator-page-title-sep{display:none}
.wpforms-page-indicator-steps{margin-left:auto}
.wpforms-page-indicator-page-progress-wrap{flex:1 1 100%; height:5px; background:var(--cink-2); margin-top:6px}
.wpforms-page-indicator-page-progress{height:100%; background:var(--min); transition:width .6s var(--e)}
.wpforms-page{display:none; grid-template-columns:1fr 1fr; gap:22px 20px}
.wpforms-page.is-active{display:grid; animation:rise .5s var(--e) both}
.wpforms-field{grid-column:1 / -1; min-width:0; position:relative}
.wpforms-one-half{grid-column:span 1}
.wpforms-field-label{display:block; font-weight:650; font-size:15.5px; margin-bottom:8px}
.wpforms-required-label{color:var(--min)}
.wpforms-field-description{font-size:13.5px; color:var(--ink-3); margin-top:6px}
.wpforms-field input[type=text],.wpforms-field input[type=tel],.wpforms-field input[type=email],.wpforms-field select,.wpforms-field textarea{
  width:100%; min-height:52px; padding:12px 14px; background-color:#fff; color:var(--ink); border:1.5px solid #8A9396; border-radius:2px; font:inherit; font-size:16px; transition:border-color .25s var(--e), box-shadow .25s var(--e)}
.wpforms-field textarea{min-height:104px; resize:vertical}
.wpforms-field select{appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%2315191B' stroke-width='1.5'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; padding-right:40px}
.wpforms-field input:hover,.wpforms-field select:hover,.wpforms-field textarea:hover{border-color:var(--celik)}
.wpforms-field input:focus,.wpforms-field select:focus,.wpforms-field textarea:focus{outline:0; border-color:var(--ink); box-shadow:0 3px 0 -1px var(--min)}
::placeholder{color:#697275}
.wpforms-icon-choices{list-style:none; display:grid; grid-template-columns:repeat(5, 1fr); gap:10px}
.wpforms-icon-choices-item label{display:flex; flex-direction:column; align-items:flex-start; gap:12px; height:100%; min-height:112px; padding:14px 12px; background:#fff; border:1.5px solid #8A9396; border-radius:2px; cursor:pointer; font-weight:600; font-size:14.5px; line-height:1.25; position:relative; transition:border-color .25s, background-color .25s}
.wpforms-icon-choices-icon .prof{width:30px; height:30px; color:var(--antracit); transition:transform .6s var(--e2), color .25s}
.wpforms-icon-choices-item label:hover{border-color:var(--ink)}
.wpforms-icon-choices-item label:hover .prof{transform:rotate(90deg)}
.wpforms-icon-choices-item.wpforms-selected label{border-color:var(--min); background:var(--min-l); box-shadow:inset 0 0 0 1px var(--min)}
.wpforms-icon-choices-item.wpforms-selected .prof{color:var(--min)}
.wpforms-icon-choices-item label:focus-within{outline:2.5px solid var(--min); outline-offset:2px}
.wpforms-screen-reader-element{position:absolute; opacity:0; width:1px; height:1px; overflow:hidden}
@media (max-width:760px){.wpforms-icon-choices{grid-template-columns:1fr 1fr}.wpforms-icon-choices-item:last-child{grid-column:1 / -1}.wpforms-icon-choices-item:last-child label{min-height:0; flex-direction:row; align-items:center}.wpforms-icon-choices-item label{min-height:96px}}
@media (max-width:560px){.wpforms-page{grid-template-columns:1fr}.wpforms-one-half{grid-column:1 / -1}}

.wpforms-uploader{position:relative; display:grid; place-items:center; min-height:132px; padding:18px; border:1.5px dashed #8A9396; background:repeating-linear-gradient(135deg, transparent 0 10px, rgba(21,25,27,.025) 10px 11px), #fff; text-align:center; transition:border-color .25s, background-color .25s}
.wpforms-uploader input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.wpforms-uploader:hover,.wpforms-uploader.dz-drag-hover{border-color:var(--min); background-color:var(--min-l)}
.wpforms-uploader:focus-within{outline:2.5px solid var(--min); outline-offset:2px}
.dz-message{display:grid; justify-items:center; gap:6px; pointer-events:none}
.dz-message .i{width:28px; height:28px; color:var(--min)}
.modern-title{font-weight:650}
.modern-hint{font-size:13.5px; color:var(--ink-3)}
.dz-previews{display:grid; gap:6px; margin-top:8px}
.dz-preview{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; padding:8px 10px; background:#fff; border:1px solid var(--line); font-size:14px}
.dz-ext{font:700 11px/1 var(--fd); padding:5px 6px; background:var(--antracit); color:#fff}
.dz-filename{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dz-size{color:var(--ink-3); font-size:13px}
.dz-remove{border:0; background:none; padding:6px; display:grid; place-items:center}
.dz-error{border-color:var(--err); background:#FDF1EF}
.dz-error .dz-size{color:var(--err); font-weight:650}
.dz-error .dz-ext{background:var(--err)}
.wpforms-field-gdpr-checkbox ul{list-style:none}
.wpforms-field-gdpr-checkbox li{display:flex; gap:12px; align-items:flex-start}
.wpforms-field-gdpr-checkbox input{width:22px; height:22px; margin:1px 0 0; accent-color:var(--min); flex:none}
.wpforms-field-gdpr-checkbox label{font-size:15px}
.atim-note{grid-column:1 / -1; font-size:13.5px; color:var(--ink-3); margin:0}
.wpforms-field-pagebreak{display:flex; justify-content:flex-end}
.wpforms-page-button{min-height:52px; padding:0 26px; border:1.5px solid var(--ink); background:var(--ink); color:#fff; font-weight:650; border-radius:2px; transition:background-color .3s var(--e)}
.wpforms-page-button:hover{background:#000}
.wpforms-page-prev{background:transparent; color:var(--ink)}
.wpforms-page-prev:hover{background:var(--cink-2)}
.wpforms-field-pagebreak--last{justify-content:flex-start}
.wpforms-submit-container{margin-top:22px}
.wpforms-submit{width:100%}
.wpforms-submit:disabled{opacity:.75; cursor:progress}
.atim-form__alt{margin:18px 0 0; font-size:14.5px; color:var(--ink-3)}
.atim-form__alt a{font-weight:650; color:var(--ink)}
.wpforms-has-error input,.wpforms-has-error textarea,.wpforms-has-error select{border-color:var(--err)}
.wpforms-has-error .wpforms-icon-choices-item label{border-color:#E3A69C}
.wpforms-has-error .wpforms-uploader{border-color:var(--err)}
em.wpforms-error{display:flex; gap:6px; margin-top:7px; font-style:normal; font-size:14px; font-weight:600; color:var(--err)}
em.wpforms-error::before{content:'!'; display:inline-grid; place-items:center; width:17px; height:17px; flex:none; border-radius:50%; background:var(--err); color:#fff; font-size:11px; margin-top:2px}
.wpforms-error-container{margin-top:18px; padding:16px 18px; background:#FDF1EF; border-left:5px solid var(--err); color:#5C150F; font-size:15px}
.atim-loading{position:absolute; inset:0; z-index:5; display:grid; align-content:center; gap:12px; padding:40px; background:rgba(250,250,248,.9)}
.atim-loading i{display:block; height:18px; background:linear-gradient(90deg, var(--cink-2) 0 40%, #F6F7F6 50%, var(--cink-2) 60%) 0 0 / 300% 100%; animation:shimmer 1.3s linear infinite}
.atim-loading i:nth-child(2){width:78%}.atim-loading i:nth-child(3){width:56%}
.atim-loading span{font-weight:650; margin-top:6px}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.wpforms-confirmation-container-full{padding:clamp(24px, 4vw, 44px); background:#fff; border:1.5px solid var(--ok); animation:rise .6s var(--e) both}
.wpforms-confirmation-container-full h3{font-size:clamp(24px, 2.4vw, 32px); margin:18px 0 10px}
.atim-form.is-sent .wpforms-form{display:none}
.ok-bolt{position:relative; display:block; width:56px; height:56px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 60%), var(--min); box-shadow:inset 0 0 0 2px rgba(0,0,0,.18), 0 0 0 5px var(--min-l); animation:tighten 1.1s var(--e2) both .1s}
.ok-bolt::after{content:''; position:absolute; left:50%; top:46%; width:24%; height:44%; border:solid #fff; border-width:0 3px 3px 0; transform:translate(-50%, -50%) rotate(45deg)}
.ok-bolt--lg{width:80px; height:80px}
@keyframes tighten{from{transform:rotate(-140deg)}to{transform:rotate(0)}}

/* ==========================================================================
   CTA traka (uvek svetla, ide iznad tamnog footera)
   ========================================================================== */
.cta{position:relative; overflow:hidden; background:var(--cink-2); padding-block:clamp(56px, 7vw, 96px); box-shadow:inset 0 1px 0 var(--line)}
.cta__big{width:min(520px, 60vw); aspect-ratio:1; right:-140px; top:50%; transform:translateY(-50%); --pf:rgba(176,68,42,.06)}
.cta__in{position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:28px 56px; align-items:center}
.cta h2{font-size:clamp(28px, 3vw, 44px); margin-bottom:12px}
.cta p{color:var(--ink-2); max-width:52ch}
.cta__a{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.cta__or{color:var(--ink-3); font-size:15px}
@media (max-width:1000px){.cta__in{grid-template-columns:1fr}}
@media (max-width:560px){.cta__a .btn,.cta__a .tel{flex:1 1 100%; justify-content:center}.cta__or{flex:1 1 100%; text-align:center}}

/* ==========================================================================
   Stranica usluge
   ========================================================================== */
.shero{position:relative; overflow:hidden}
.shero__big{width:min(700px, 70vw); aspect-ratio:1; left:-300px; top:80px; --pf:rgba(21,25,27,.04)}
.shero__in{position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px, 5vw, 80px); align-items:center; padding-top:clamp(28px, 3vw, 44px); padding-bottom:clamp(56px, 6vw, 88px)}
.shero h1{font-size:clamp(38px, 4.6vw, 66px); margin-bottom:24px}
.shero .lead{margin-bottom:14px}
.shero__t > p:not(.lead):not(.mark):not(.shero__call){color:var(--ink-3); max-width:58ch}
.shero__a{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.shero__call{margin-top:16px; color:var(--ink-3)}
.shero__img{aspect-ratio:4/4.4; max-height:720px}
@media (max-width:900px){.shero__in{grid-template-columns:1fr}.shero__img{aspect-ratio:4/3}.shero__a .btn{flex:1 1 100%}}

.types{background:var(--papir); box-shadow:inset 0 1px 0 var(--line)}
.types h2{margin-bottom:clamp(32px, 4vw, 52px)}
.types__l{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(32px, 5vw, 72px)}
.type{display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; padding:26px 0 28px; border-top:1.5px solid var(--ink); position:relative}
.type .type__tag{justify-self:start; margin-bottom:4px}
.type h3{font-size:22px}
.type p{color:var(--ink-2); max-width:48ch; margin:0}
@media (max-width:760px){.types__l{grid-template-columns:1fr}}

.who__in{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:40px clamp(32px, 5vw, 80px); align-items:start}
.who__in h2{position:sticky; top:calc(var(--hdr) + 32px)}
.who__l{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:20px}
.who__i{padding:26px 24px 28px; background:var(--papir); box-shadow:0 0 0 1px var(--line); position:relative}
.who__i::before{content:''; position:absolute; left:0; top:0; width:44px; height:4px; background:var(--min)}
.who__i:nth-child(2),.who__i:nth-child(4){transform:translateY(36px)}
.who__i.in:nth-child(2),.who__i.in:nth-child(4){transform:translateY(36px)}
.who__i h3{margin-bottom:8px}
.who__i p{color:var(--ink-2); font-size:16px}
@media (max-width:900px){.who__in{grid-template-columns:1fr}.who__in h2{position:static}.who__l{grid-template-columns:1fr}.who__i:nth-child(n),.who__i.in:nth-child(n){transform:none}}

.probs{background:var(--antracit); color:var(--cink)}
.probs h2{color:#fff; margin-bottom:clamp(32px, 4vw, 52px)}
.probs__l{list-style:none; display:grid; gap:0}
.prob{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:12px clamp(24px, 4vw, 64px); padding:28px 0; border-top:1px solid var(--line-d)}
.prob span{display:block; font:650 11.5px/1 var(--fb); letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; color:#B7BFC2}
.prob__q{font-size:clamp(20px, 1.8vw, 26px); color:#fff; font-weight:600}
.prob__a{margin:0; color:#D3D9D7; font-size:17px; position:relative; padding-left:26px}
.prob__a::before{content:''; position:absolute; left:0; top:4px; width:4px; bottom:4px; background:var(--min)}
.prob__a span{color:var(--min-on-dark)}
@media (max-width:760px){.prob{grid-template-columns:1fr}}

.price__in{display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:clamp(32px, 5vw, 80px); align-items:start}
.price__h h2{margin-bottom:20px}
.price__h > p{color:var(--ink-2)}
.price__time{margin-top:28px; padding:22px 24px; background:var(--papir); box-shadow:inset 5px 0 0 var(--min), 0 0 0 1px var(--line)}
.price__time h3{font-size:20px; margin-bottom:8px}
.price__time p{color:var(--ink-2); font-size:16px}
.price__lh{font:650 13px/1 var(--fb); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.price__l{list-style:none; counter-reset:c}
.price__l li{display:grid; grid-template-columns:40px 1fr; column-gap:10px; padding:18px 0; border-top:1px solid var(--line-2); counter-increment:c}
.price__l li::before{content:counter(c, decimal-leading-zero); grid-row:span 2; font:700 14px/1.4 var(--fd); color:var(--min)}
.price__l h4{margin-bottom:4px}
.price__l p{margin:0; color:var(--ink-2); font-size:15.5px}
@media (max-width:900px){.price__in{grid-template-columns:1fr}}

.work{background:var(--papir); box-shadow:inset 0 1px 0 var(--line)}
.proc{background:var(--cink)}
.proc h2{margin-bottom:clamp(36px, 4vw, 56px)}
.proc .shead h2{margin-bottom:0}

.faq__in{display:grid; grid-template-columns:minmax(0, 4.5fr) minmax(0, 7.5fr); gap:40px clamp(32px, 5vw, 80px); align-items:start}
.faq__h{position:sticky; top:calc(var(--hdr) + 32px)}
.faq__h h2{margin-bottom:16px}
.faq__h p{color:var(--ink-3); margin-bottom:20px}
.schema-faq-section{border-top:1.5px solid var(--ink)}
.schema-faq-section:last-child{border-bottom:1.5px solid var(--ink)}
.schema-faq-question{display:block; font:inherit}
.faq-btn{display:flex; width:100%; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; background:none; border:0; text-align:left; font:650 clamp(18px, 1.5vw, 21px)/1.3 var(--fd)}
.faq-btn i{position:relative; flex:none; width:30px; height:30px; border-radius:50%;
  background:linear-gradient(rgba(21,25,27,.7), rgba(21,25,27,.7)) 50% 50% / 56% 2px no-repeat, linear-gradient(rgba(21,25,27,.7), rgba(21,25,27,.7)) 50% 50% / 2px 56% no-repeat, radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), transparent 60%), var(--cink-3);
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.2); transition:transform .6s var(--e2), background-color .3s}
.schema-faq-section.is-open .faq-btn i{transform:rotate(45deg); background-color:#E6A895}
.faq-btn:hover i{transform:rotate(90deg)}
.schema-faq-section.is-open .faq-btn:hover i{transform:rotate(45deg)}
.schema-faq-answer{margin:0; display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--e)}
.schema-faq-answer > span{overflow:hidden; color:var(--ink-2); max-width:62ch}
.schema-faq-section.is-open .schema-faq-answer{grid-template-rows:1fr}
.schema-faq-section.is-open .schema-faq-answer > span{padding-bottom:24px}
.no-js .schema-faq-answer{display:block; padding-bottom:20px}
.schema-faq-answer a{font-weight:650}
@media (max-width:900px){.faq__in{grid-template-columns:1fr}.faq__h{position:static}}

.others{background:var(--papir); box-shadow:inset 0 1px 0 var(--line)}
.others h2{margin-bottom:32px}
.others__l{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:0; box-shadow:0 0 0 1px var(--line)}
.svc-o{display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:16px; row-gap:4px; align-items:center; padding:26px 24px; text-decoration:none; background:var(--papir); box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line); transition:background-color .3s var(--e)}
.svc-o .prof{grid-row:span 2; width:36px; height:36px; color:var(--antracit); transition:color .3s, transform .6s var(--e2)}
.svc-o__n{font:650 20px/1.2 var(--fd)}
.svc-o__d{grid-column:2; font-size:14.5px; color:var(--ink-3)}
.svc-o > .i{grid-row:1 / span 2; grid-column:3; color:var(--min); transition:transform .4s var(--e)}
.svc-o:hover{background:#fff}
.svc-o:hover .prof{color:var(--min); transform:rotate(90deg)}
.svc-o:hover > .i{transform:translateX(5px)}

/* ==========================================================================
   Kartice projekata: arhiva, usluge, o nama (isti raspored svuda, bez lightboxa)
   „Stepenište“: tri kartice u redu, širine 5, 4 i 3 kolone, svaka spuštena za jedan stepenik;
   sledeći red je obrnut (3, 4, 5) i penje se. Nepotpun red popunjava CTA pločica.
   ========================================================================== */
.pgrid{--stp:clamp(28px, 3.4vw, 52px); display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:clamp(36px, 3.4vw, 52px) 22px; align-items:start; padding-bottom:calc(var(--stp) * 2)}
.pcard{grid-column:span var(--s, 4); margin-top:calc(var(--stp) * var(--st, 0)); position:relative}
.pcard[data-span="3"]{--s:3}.pcard[data-span="4"]{--s:4}.pcard[data-span="5"]{--s:5}.pcard[data-span="7"]{--s:7}.pcard[data-span="8"]{--s:8}.pcard[data-span="9"]{--s:9}
.pcard[data-step="1"]{--st:1}.pcard[data-step="2"]{--st:2}
.pcard[hidden]{display:none}
/* stepenik: tanka čelična traka ispod slike koja se nastavlja do sledeće kartice */
.pcard:not(.pcard--cta)::before{content:''; position:absolute; left:0; right:-22px; top:calc(clamp(250px, 24vw, 340px) + 0px); height:3px; background:var(--antracit); z-index:0}
.pcard[data-step="2"]:not(.pcard--cta)::before,.pcard:last-child::before{right:0}
.pcard__a{display:flex; flex-direction:column; height:100%; text-decoration:none; color:var(--ink); position:relative; z-index:1}
.pcard__img{position:relative; overflow:hidden; height:clamp(250px, 24vw, 340px); background:var(--cink-3)}
.pcard__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e)}
.pcard__img::before{content:''; position:absolute; z-index:1; left:0; top:0; bottom:0; width:7px; background:var(--min); transition:width .6s var(--e)}
.pcard__a:hover .pcard__img img{transform:scale(1.04)}
.pcard__a:hover .pcard__img::before{width:14px}
.pcard__b{padding-top:20px; display:grid; gap:6px; align-content:start}
.pcard__cat{display:flex; align-items:center; gap:8px; margin:0; font:600 12.5px/1.2 var(--fb); letter-spacing:.08em; text-transform:uppercase; color:var(--min)}
.pcard__prof{width:18px; height:18px}
.pcard__t{font:650 clamp(19px, 1.55vw, 24px)/1.15 var(--fd); letter-spacing:-.01em; max-width:30ch}
.pcard[data-span="3"] .pcard__t{font-size:clamp(18px, 1.35vw, 20px)}
.pcard__d{margin:0; color:var(--ink-3); font-size:15px; max-width:52ch}
.pcard[data-span="3"] .pcard__d{display:none}
.pcard__go{position:relative; justify-self:start; margin-top:6px; padding-bottom:6px; font-weight:650; font-size:15px}
.pcard__go::after{content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:radial-gradient(ellipse 2.1px 2.5px at 50% 50%, var(--min) 88%, transparent 100%) 0 0 / 3.4px 5px repeat-x; transform:scaleX(.18); transform-origin:left; transition:transform .55s var(--e)}
.pcard__a:hover .pcard__go::after{transform:scaleX(1)}
.pcard--cta{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; min-height:clamp(250px, 24vw, 340px); padding:clamp(22px, 2.6vw, 36px); background:var(--min); color:#fff}
.pcard--cta .pcard__t{font-size:clamp(22px, 2vw, 30px); max-width:16ch}
.pcard--cta p{color:#FBE7E1; max-width:40ch}
.pcard--cta[data-span="3"] p:not(.pcard__t){display:none}
.pcard--cta .btn{--bg:var(--antracit-3); --bd:var(--antracit-3); --bolt:#8D979B; --slot:rgba(0,0,0,.6); align-self:flex-start; margin-top:8px}
.pcard--cta .btn:hover{--bg:#000; --bd:#000}
.pcard__big{width:340px; aspect-ratio:1; right:-90px; top:-80px; --pf:rgba(255,255,255,.12)}
/* tablet: vodoravni redovi (slika levo, tekst desno), stepenik ostaje kao uvlačenje */
@media (max-width:1100px){
  .pgrid{grid-template-columns:minmax(0, 1fr); gap:28px; padding-bottom:0}
  .pcard,.pcard[data-span]{grid-column:1 / -1; margin-top:0; margin-left:calc(var(--st, 0) * 5%)}
  .pcard:not(.pcard--cta)::before{display:none}
  .pcard__a{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:0 28px; align-items:center}
  .pcard__img{height:auto; aspect-ratio:4/3}
  .pcard__b{padding:0}
  .pcard[data-span="3"] .pcard__d{display:block}
  .pcard--cta{min-height:0}
  .pcard--cta[data-span="3"] p:not(.pcard__t){display:block}
}
@media (max-width:640px){
  .pcard,.pcard[data-span]{margin-left:0}
  .pcard__a{display:flex}
  .pcard__b{padding-top:16px}
}

/* ---------- arhiva ---------- */
.ahero{padding-top:clamp(28px, 3vw, 44px); display:grid; gap:36px}
.ahero__t{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:24px 56px; align-items:end}
.ahero h1{font-size:clamp(38px, 4.6vw, 66px)}
.ahero .lead{margin:0}
.pfilter ul{list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.pfilter__i{display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 16px; background:var(--papir); box-shadow:inset 0 0 0 1.5px var(--line-2); border-radius:2px; text-decoration:none; font-weight:650; font-size:15px; transition:background-color .25s, color .25s, box-shadow .25s}
.pfilter__i span{font:700 12.5px/1 var(--fd); padding:4px 6px; background:var(--cink-2); border-radius:2px; font-variant-numeric:tabular-nums}
.pfilter__prof{width:18px; height:18px; color:var(--celik)}
.pfilter__i:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pfilter__i[aria-current="page"]{background:var(--antracit); color:#fff; box-shadow:none}
.pfilter__i[aria-current="page"] span{background:var(--min); color:#fff}
.pfilter__i[aria-current="page"] .prof{color:#fff}
.pfilter__i--demo{box-shadow:inset 0 0 0 1.5px var(--line); border-style:dashed; color:var(--ink-3)}
.pempty{display:grid; justify-items:start; gap:14px; padding:clamp(32px, 5vw, 64px); background:var(--papir); box-shadow:0 0 0 1px var(--line), inset 7px 0 0 var(--min)}
.pempty__art{display:flex; gap:14px; margin-bottom:8px}
.pempty__art .prof{width:44px; height:44px; color:var(--cink-3); stroke:var(--celik); stroke-width:.6}
.pempty h2{font-size:clamp(26px, 2.6vw, 36px)}
.pempty p{color:var(--ink-2); max-width:60ch}
.pempty__a{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
@media (max-width:800px){.ahero__t{grid-template-columns:1fr}}

/* ---------- single projekat ---------- */
.phero{padding-top:clamp(28px, 3vw, 44px)}
.phero__t{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:16px 56px; align-items:end; margin-bottom:clamp(28px, 3vw, 44px)}
.phero__t .mark{grid-column:1 / -1; margin:0}
.phero h1{font-size:clamp(34px, 4.2vw, 60px)}
.phero .lead{margin:0}
.todo-line{grid-column:1 / -1; margin:0}
.phero__img{aspect-ratio:21/9; padding:0; max-width:calc(var(--max) + 2 * var(--gut) - 2 * var(--gut))}
@media (max-width:1400px){.phero__img{max-width:none; width:calc(100% - 2 * var(--gut))}}
.phero__img img{width:100%; height:100%; object-fit:cover}
@media (max-width:800px){.phero__t{grid-template-columns:1fr}.phero__img{aspect-ratio:4/3}}
.tr{display:grid; gap:clamp(48px, 6vw, 96px)}
.tr__row{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(28px, 4vw, 64px); align-items:center}
.tr__row--r{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr)}
.tr__img{aspect-ratio:4/3}
.tr__t h2{font-size:clamp(28px, 3vw, 42px); margin-bottom:16px; padding-top:18px; position:relative}
.tr__t h2::before{content:''; position:absolute; top:0; left:0; width:44px; height:4px; background:var(--min)}
.tr__t p{font-size:18px; color:var(--ink-2); max-width:46ch}
@media (max-width:800px){.tr__row,.tr__row--r{grid-template-columns:1fr}.tr__row--r .tr__img{order:-1}}
.gal{background:var(--papir); box-shadow:inset 0 1px 0 var(--line)}
.gal__nav{display:flex; align-items:center; gap:8px}
.gal__count{font:600 15px/1 var(--fd); margin-right:8px; font-variant-numeric:tabular-nums}
.sbtn{display:grid; place-items:center; width:48px; height:48px; border:1.5px solid var(--ink); background:transparent; border-radius:2px; transition:background-color .25s, color .25s}
.sbtn:hover:not(:disabled){background:var(--ink); color:#fff}
.sbtn:disabled{opacity:.3; cursor:default}
.sbtn--inv{border-color:rgba(255,255,255,.5); color:#fff}
.sbtn--inv:hover:not(:disabled){background:#fff; color:var(--ink)}
.gslider{list-style:none; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; padding-bottom:14px; overscroll-behavior-x:contain}
.gslide{flex:0 0 min(72%, 900px); scroll-snap-align:start}
.gslide__b{position:relative; display:block; width:100%; padding:0; border:0; background:var(--cink-3); cursor:zoom-in; aspect-ratio:3/2; overflow:hidden}
.gslide__b img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--e)}
.gslide__b:hover img{transform:scale(1.03)}
.gal__hint{font-size:14px; color:var(--ink-3); margin-top:8px}
@media (max-width:700px){.gslide{flex-basis:88%}}
.det__in{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:32px clamp(32px, 5vw, 80px); align-items:start}
.det__l{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 32px}
.det__l > div{padding:16px 0; border-top:1px solid var(--line-2)}
.det__l dt{font:650 12px/1 var(--fb); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.det__l dd{margin:0; font-weight:550}
.det__l dd a{font-weight:650}
.back{grid-column:2; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:22px 24px; background:var(--papir); text-decoration:none; box-shadow:0 0 0 1px var(--line), inset 5px 0 0 var(--min); transition:background-color .3s}
.back:hover{background:#fff}
.back__prof{width:34px; height:34px; color:var(--min)}
.back small{display:block; font-size:13px; color:var(--ink-3)}
.back span{font:650 20px/1.2 var(--fd)}
.back .i{color:var(--min); transition:transform .4s var(--e)}
.back:hover .i{transform:translateX(5px)}
@media (max-width:800px){.det__in{grid-template-columns:1fr}.back{grid-column:auto}.det__l{grid-template-columns:1fr}}
.next{background:var(--papir); box-shadow:inset 0 1px 0 var(--line)}
.next__a{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 320px); grid-template-rows:auto auto 1fr; column-gap:40px; padding-block:clamp(40px, 5vw, 64px); text-decoration:none}
.next__l{font:650 12.5px/1 var(--fb); letter-spacing:.1em; text-transform:uppercase; color:var(--min); margin-bottom:12px}
.next__n{font:650 clamp(26px, 3vw, 42px)/1.05 var(--fd); letter-spacing:-.02em; max-width:22ch}
.next__w{margin-top:10px; color:var(--ink-3)}
.next__img{grid-column:2; grid-row:1 / -1; aspect-ratio:4/3; overflow:hidden; position:relative}
.next__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e)}
.next__a:hover .next__img img{transform:scale(1.05)}
.next__a:hover .next__n{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px}
@media (max-width:700px){.next__a{grid-template-columns:1fr}.next__img{grid-column:auto; grid-row:auto; margin-top:20px}}

/* lightbox: cela fotografija, bez sečenja, puna pozadina */
.lb{overscroll-behavior:contain; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#0E1112; color:#fff}
.lb::backdrop{background:#0E1112}
.lb[open]{display:grid; grid-template-rows:auto 1fr auto}
.lb__top,.lb__bot{display:flex; align-items:center; gap:16px; padding:14px var(--gut)}
.lb__top{justify-content:space-between; font-size:14px; color:#C7CECC}
.lb__top #lbTitle{font:600 16px/1.2 var(--fd); color:#fff; flex:1}
.lb__x{display:grid; place-items:center; width:48px; height:48px; border:1.5px solid rgba(255,255,255,.4); background:none; color:#fff; border-radius:2px}
.lb__x svg{width:20px}
.lb__stage{display:grid; place-items:center; min-height:0; padding:0 var(--gut)}
.lb__stage img{max-width:100%; max-height:calc(100dvh - 160px); width:auto; height:auto; object-fit:contain}
.lb__bot{justify-content:space-between}
.lb__bot p{margin:0; text-align:center; font-size:14px; color:#C7CECC; flex:1}

/* ---------- o nama ---------- */
.ohero{position:relative; overflow:hidden}
.ohero__big{width:min(640px, 70vw); aspect-ratio:1; right:-200px; top:-60px; --pf:rgba(21,25,27,.04)}
.ohero__in{position:relative; display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:clamp(32px, 5vw, 80px); align-items:end; padding-top:clamp(28px, 3vw, 44px); padding-bottom:var(--sec)}
.ohero h1{margin-bottom:24px}
.ohero__img{aspect-ratio:4/3}
.owner{background:var(--papir); box-shadow:inset 0 1px 0 var(--line)}
.owner__in{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 5vw, 80px); align-items:center}
.owner__img{aspect-ratio:4/5}
.owner__img figcaption{position:absolute; left:14px; bottom:14px; z-index:2; background:rgba(250,250,248,.94); padding:8px 10px; font-size:13.5px; font-weight:600}
.owner__t h2{margin-bottom:20px}
.owner__t p{font-size:18px; color:var(--ink-2); max-width:56ch}
.how h2{margin-bottom:40px}
.how__l{list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; counter-reset:h}
.how__l li{padding-top:22px; border-top:1.5px solid var(--ink); counter-increment:h}
.how__l li::before{content:counter(h, decimal-leading-zero); display:block; font:700 13px/1 var(--fd); color:var(--min); margin-bottom:14px}
.how__l h3{margin-bottom:8px; font-size:21px}
.how__l p{font-size:15.5px; color:var(--ink-2)}
.how__l li:nth-child(2){margin-top:32px}.how__l li:nth-child(3){margin-top:64px}.how__l li:nth-child(4){margin-top:96px}
@media (max-width:1000px){.how__l{grid-template-columns:1fr 1fr}.how__l li:nth-child(n){margin-top:0}}
@media (max-width:560px){.how__l{grid-template-columns:1fr}}
.osvc{background:var(--papir); box-shadow:inset 0 1px 0 var(--line)}
.osvc h2{margin-bottom:32px}
.quals__in{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:32px clamp(32px, 5vw, 80px)}
.quals h2{margin-bottom:16px}
.quals__in > div > p{color:var(--ink-3)}
.about-work{background:var(--papir); box-shadow:inset 0 1px 0 var(--line)}
@media (max-width:900px){.ohero__in,.owner__in,.quals__in{grid-template-columns:1fr}}

/* ---------- kontakt ---------- */
.khero{padding-top:clamp(28px, 3vw, 44px); padding-bottom:clamp(28px, 3vw, 40px)}
.khero h1{margin-bottom:20px; max-width:16ch}
.kontakt__in{display:grid; grid-template-columns:minmax(0, 7.5fr) minmax(0, 4.5fr); gap:clamp(24px, 4vw, 56px); align-items:start}
.kontakt__h{font-size:clamp(22px, 2vw, 28px); margin-bottom:20px}
.csid{position:sticky; top:calc(var(--hdr) + 28px); display:grid; gap:20px}
.csid__l{list-style:none; display:grid}
.csid__l li{display:grid; gap:4px; padding:14px 0; border-top:1px solid var(--line-2)}
.csid__l small{font:650 12px/1 var(--fb); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.csid__l a{font-weight:600}
.map{position:relative; aspect-ratio:4/3; background:var(--antracit); overflow:hidden}
.map iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.map__ph{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; padding:24px; text-align:center; color:#D3D9D7; font-size:14.5px}
.map__big{width:300px; aspect-ratio:1; left:50%; top:50%; transform:translate(-50%, -50%); --pf:rgba(236,238,236,.06)}
.map__ph p{position:relative; max-width:30ch}
.map__ph .btn{--fg:#fff; --bd:#fff; --bolt:#8D979B; position:relative}
.map__ph .btn:hover{--bg:#fff; --fg:var(--ink)}
@media (max-width:1000px){.kontakt__in{grid-template-columns:1fr}.csid{position:static}}
.prep{background:var(--papir); box-shadow:inset 0 1px 0 var(--line)}
.prep__in h2{margin-bottom:36px}
.prep__l{list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px}
.prep__l li{display:grid; align-content:start; gap:10px; padding-top:20px; border-top:1.5px solid var(--ink)}
.prep__l .prof{width:30px; height:30px; color:var(--min)}
.prep__l p{font-size:15.5px; color:var(--ink-2); margin:0}
.prep__l .tlink{justify-self:start; font-size:15px}
@media (max-width:1000px){.prep__l{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.prep__l{grid-template-columns:1fr}}

/* ---------- hvala ---------- */
.thanks{position:relative; overflow:hidden; padding-block:clamp(40px, 6vw, 88px) var(--sec)}
.thanks__big{width:min(680px, 80vw); aspect-ratio:1; right:-160px; top:0; --pf:rgba(176,68,42,.07)}
.thanks__in{position:relative; display:grid; justify-items:start; gap:18px}
.thanks h1{margin-top:8px}
.thanks__l{list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 260px)); gap:20px; margin:16px 0; counter-reset:t}
.thanks__l li{display:grid; gap:4px; padding-top:16px; border-top:1.5px solid var(--ink); counter-increment:t}
.thanks__l li::before{content:counter(t, decimal-leading-zero); font:700 13px/1 var(--fd); color:var(--min); margin-bottom:6px}
.thanks__l span{color:var(--ink-2); font-size:15.5px}
.thanks__a{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
@media (max-width:700px){.thanks__l{grid-template-columns:1fr}}

/* ==========================================================================
   Footer (tamni; iznad njega je uvek svetla traka)
   ========================================================================== */
.ftr{position:relative; overflow:hidden; background:var(--antracit-3); color:#C3CAC8; font-size:15.5px}
.ftr__big{width:620px; aspect-ratio:1; right:-260px; bottom:-300px; --pf:rgba(236,238,236,.025)}
.ftr__in{position:relative; display:grid; grid-template-columns:minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap:40px; padding-block:clamp(56px, 6vw, 84px)}
.plate--ftr{align-self:auto; margin:0 0 20px; background:var(--rv) 7px 7px / 6px 6px no-repeat, var(--rv) calc(100% - 7px) 7px / 6px 6px no-repeat, var(--rv) 7px calc(100% - 7px) / 6px 6px no-repeat, var(--rv) calc(100% - 7px) calc(100% - 7px) / 6px 6px no-repeat, linear-gradient(160deg, #4A5358, #3A4246); display:inline-grid}
.ftr__brand p{max-width:38ch}
.ftr__h{font:650 12.5px/1 var(--fb); letter-spacing:.1em; text-transform:uppercase; color:#8D979B; margin-bottom:16px}
.ftr ul{list-style:none; display:grid; gap:10px}
.ftr a{color:#E6EAE8; text-decoration:none}
.ftr a:hover{text-decoration:underline; text-underline-offset:4px}
.ftr__nap li{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.ftr__nap a{display:inline-flex; align-items:flex-start; gap:8px}
.ftr__nap .i{color:var(--min-on-dark); margin-top:2px}
.ftr__tel{font:700 19px/1 var(--fd); font-variant-numeric:tabular-nums}
.ftr__tel .i{margin-top:0}
.ftr .copy-mail{color:#E6EAE8; font-weight:500}
.ftr .copy-mail .i{color:var(--min-on-dark)}
.ftr .copy-mail.is-copied{color:#8FD3AE}
.ftr__hours .i{color:var(--min-on-dark)}
.ftr__bot{position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-block:22px 28px; background:linear-gradient(var(--line-d), var(--line-d)) var(--gut) 0 / calc(100% - 2 * var(--gut)) 1px no-repeat; font-size:14px; color:#9AA3A7}
.ftr__bot p{margin:0}
.ftr__bot a{text-decoration:underline; text-underline-offset:3px}
@media (max-width:1000px){.ftr__in{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ftr__in{grid-template-columns:1fr}.ftr__bot{padding-bottom:96px}}

/* mobilna traka „Pozovite / Pošaljite upit“ */
.callbar{display:none}
@media (max-width:900px){
  .callbar{position:fixed; left:0; right:0; bottom:0; z-index:58; display:grid; grid-template-columns:1fr 1.3fr; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); gap:8px; background:rgba(236,238,236,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 -1px 0 var(--line); transition:transform .45s var(--e2)}
  .callbar.is-hidden{transform:translateY(110%)}
  .callbar a{display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; font-weight:650; text-decoration:none; border-radius:2px}
  .callbar__tel{border:1.5px solid var(--ink); color:var(--ink)}
  .callbar__tel .i{color:var(--min)}
  .callbar__up{background:var(--min); color:#fff}
  body{padding-bottom:70px}
  body.menu-open .callbar{transform:translateY(110%)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
}
.shead > .gal__nav{justify-self:end}
@media (max-width:800px){.shead > .gal__nav{justify-self:start}}