/* ============================================================
   BREND - PREDLOG 01 (2.10.2026)
   Boje iz brendinga: teget #16273b, teget svetliji #2e4558,
   karamel #a97450, maslinasto-braon #896a46, krem #f6ede3.
   Fontovi: Lora (naslovi) + Hanken Grotesk (tekst).
   Ucitava se posle nm.css i menja samo boje, fontove i naslovnu.
   ============================================================ */
:root{
  --ground:#f6ede3;          /* krem - podloga */
  --surface:#fbf7f2;         /* svetliji krem - kartice */
  --panel:#efe3d6;           /* topli krem - istaknuti blokovi, podnozje */
  --ink:#16273b;             /* teget - tekst (13:1) */
  --ink-soft:#2e4558;        /* svetliji teget - sporedni tekst (8.6:1) */
  --ink-faint:#5b6675;       /* natpisi (5:1) */
  --line:#e0d2c1;
  --line-faint:#ebdfd2;
  --accent:#2e4558;          /* linkovi */
  --accent-soft:#896a46;
  --cta:#16273b;             /* glavno dugme: teget */
  --cta-ink:#f6ede3;
  --nm-karamel:#a97450;
  --nm-karamel-txt:#8a5f3e;  /* karamel za sitan tekst (4.8:1) */
  --nm-karamel-svetao:#c4936c;
  --nm-zlato:#a97450;
  --nm-video:#0c1118;
  --f-display:"Lora",Georgia,"Times New Roman",serif;
  --f-body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
}
body{font-variation-settings:normal}
h1,h2,h3,h4{font-weight:400;letter-spacing:-.005em}
h1 em,h2 em,h3 em{font-style:italic;color:var(--nm-karamel)}
.svc-name,.cred dt,.creds-head h2,.contact-line,.wordmark{font-weight:400}
::selection{background:var(--ink);color:var(--ground)}

/* gornja traka i zaglavlje: svetlo, tanka linija */
.utility{background:var(--panel);color:var(--ink-soft);border-bottom:1px solid var(--line)}
header.site{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
header.site a,.utility a{color:inherit}
footer.site{background:var(--panel);color:var(--ink);border-top:1px solid var(--line)}
footer.site a{color:var(--ink-soft)}
.foot-grid h3{color:var(--nm-karamel-txt)}

/* linkovi i oznake */
main a:not(.btn):not(.btn-quiet){text-decoration-color:var(--nm-karamel);text-underline-offset:.18em}
.label,.svc-num,.svc-from{color:var(--nm-karamel-txt)}
.cred{border-left:1px solid var(--nm-karamel)}
.cred dt{color:var(--ink)}
.cred dd{color:var(--ink-soft)}
.mlogo{background-color:var(--ink-soft);opacity:.78}
.prose ul>li::before,.checklist li::before{background:var(--nm-karamel)}
.galerija-uvod{border-left-color:var(--nm-karamel)}

/* dugme sa metalnim okvirom: karamel okvir, teget punjenje */
.lm-on{background:var(--nm-karamel)!important}
.lm-face{background:var(--ink)!important}
.lm-face::after{background:var(--ink-soft)!important}
.lm-rim canvas{filter:url(#lm-karamel)!important}
.lm-on:focus-visible{outline-color:var(--ink)!important}
.lm-rim.lm-css::before{background:conic-gradient(from 0deg,#6b4c30,#a97450 8%,#f6ede3 14%,#d2a984 20%,#896a46 32%,#5a3f26 42%,#a97450 55%,#f6ede3 62%,#a97450 70%,#6b4c30 82%,#896a46 92%,#6b4c30)!important}
.btn{color:var(--cta-ink)}

/* ================= NASLOVNA: VIDEO PREKO CELOG GORNJEG DELA ================= */
.vhero{position:relative;min-height:min(100svh,980px);display:grid;overflow:hidden;isolation:isolate;color:var(--ground);background:var(--nm-video)}
.vhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vhero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,17,24,.86) 0%,rgba(12,17,24,.6) 32%,rgba(12,17,24,.08) 60%,rgba(12,17,24,0) 72%),linear-gradient(0deg,rgba(12,17,24,.72) 0%,rgba(12,17,24,0) 30%),linear-gradient(180deg,rgba(12,17,24,.6) 0%,rgba(12,17,24,0) 24%)}
.vcopy{align-self:end;padding-top:12rem;padding-bottom:clamp(3rem,9vh,6rem);width:100%}
.vcopy>div{max-width:700px;display:grid;gap:1.35rem}
.vhero .label{color:var(--nm-karamel-svetao)}
.vhero h1,.vhero h1.h1-long,.vhero h1.h1-mid{font-size:clamp(2.1rem,3.4vw,3.1rem);line-height:1.1;letter-spacing:-.012em;max-width:540px;margin:0;color:var(--ground)}
.vhero h1 em{color:var(--nm-karamel-svetao)}
.vhero .hero-sub{margin:0;max-width:46ch;font-size:clamp(1.0625rem,1.4vw,1.15rem);font-weight:300;color:var(--ground);opacity:.82}
.vhero .hero-actions{margin-top:.6rem}
.vhero .hero-actions>a{min-width:15rem}
.vhero .btn.lm-on .lm-face{background:var(--ground)!important}
.vhero .btn.lm-on{color:var(--ink)}
.vhero .btn.lm-on:hover,.vhero .btn.lm-on:focus-visible{color:var(--ground)}
.vhero .btn-quiet{color:var(--ground);border-color:rgba(246,237,227,.4);background:transparent}
.vhero .btn-quiet:hover{color:var(--ground);border-color:var(--nm-karamel-svetao)}

/* zaglavlje preko videa (samo naslovna), posle videa postaje svetlo */
body:has(.vhero) .utility{position:absolute;left:0;right:0;top:0;z-index:41;background:transparent;color:rgba(246,237,227,.82);border-bottom-color:rgba(246,237,227,.12)}
body:has(.vhero) header.site{position:absolute;left:0;right:0;top:var(--nm-ut,2.6rem);background:transparent;color:var(--ground);border-bottom-color:rgba(246,237,227,.16);transition:background-color .35s ease,color .35s ease,border-color .35s ease}
body:has(.vhero) header.site .wordmark em{color:inherit;opacity:.8}
body:has(.vhero) header.site .navtoggle{color:inherit;border-color:rgba(246,237,227,.35)}
body:has(.vhero) header.site .navtoggle .bars::before,body:has(.vhero) header.site .navtoggle .bars::after,body:has(.vhero) header.site .navtoggle .bars span{background:currentColor}
body:has(.vhero) header.site.nm-cvrsto{position:fixed;top:0;background:var(--surface);color:var(--ink);border-bottom-color:var(--line);box-shadow:0 10px 30px -22px rgba(22,39,59,.35)}
body:has(.vhero) header.site.nm-cvrsto .navtoggle{border-color:var(--line)}
body:has(.vhero) header.site .nav li>ul a{color:var(--ink-soft)}
@media (max-width:1000px){body:has(.vhero) .nav{color:var(--ink)}}
@media (min-width:1001px){body:has(.vhero) header.site:not(.nm-cvrsto) .toggle_menu>li>a,body:has(.vhero) header.site:not(.nm-cvrsto) .toggle_menu>li>.toggle_resp{color:rgba(246,237,227,.9)}body:has(.vhero) header.site:not(.nm-cvrsto) .toggle_menu>li>a:hover{color:var(--nm-karamel-svetao)}}

/* ================= KO VAS OPERISE: portret + reference ================= */
.nm-ko{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2.5rem,6vw,6rem);align-items:center;background:transparent;border:0}
.nm-ko .ko-foto{margin:0}
.nm-ko .ko-okvir{position:relative;isolation:isolate}
.nm-ko .ko-okvir img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%}
.nm-ko .ko-okvir::after{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--nm-karamel);z-index:-1;pointer-events:none}
.nm-ko .creds-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2rem 2.5rem}
.nm-ko .creds-grid>*{grid-column:auto!important}
.nm-ko .creds-grid>*:last-child:nth-child(odd){grid-column:1/-1!important}

@media (max-width:860px){
  .vhero{min-height:100svh}
  .vhero::before{background:linear-gradient(0deg,rgba(12,17,24,.95) 0%,rgba(12,17,24,.7) 38%,rgba(12,17,24,0) 62%),linear-gradient(180deg,rgba(12,17,24,.6) 0%,rgba(12,17,24,0) 16%)}
  body:has(.vhero) .utility{display:none}
  body:has(.vhero) header.site{top:0}
  .vcopy{padding-bottom:1.5rem}
  .vcopy>div{gap:1rem}
  .vhero h1,.vhero h1.h1-long,.vhero h1.h1-mid{font-size:clamp(1.8rem,7.6vw,2.2rem)}
  .vhero .label{font-size:.625rem;letter-spacing:.16em}
  .vhero .hero-sub{display:none}
  .vhero .hero-actions{flex-wrap:nowrap;gap:10px}
  .vhero .hero-actions>a{flex:1 1 0;min-width:0!important;padding-left:10px!important;padding-right:10px!important;font-size:.72rem;letter-spacing:.06em;white-space:nowrap;text-align:center}
  .nm-ko{grid-template-columns:1fr}
  .nm-ko .ko-foto{max-width:400px}
}
@media (max-width:420px){.nm-ko .creds-grid{gap:1.6rem 1.25rem}.nm-ko .ko-okvir::after{inset:10px -8px -10px 10px}}
@media (prefers-reduced-motion:reduce){.vhero video{display:none}.vhero{background:var(--nm-video) url("/files/nm/hero-desktop-poster.jpg") 70% center/cover}}

/* NASLOVI PRI SKROLOVANJU(2.10.2026): ostaju potpuno vidljivi dok ne stignu do zaglavlja,
   pa se blago povlace tek u poslednjem delu, ispod same linije zaglavlja. */
@keyframes nmTokH2b {
  entry 0% { opacity: 0; translate: 0 64px; scale: .88; filter: blur(10px); }
  cover 40% { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
  cover 86% { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
  cover 100% { opacity: 0; translate: 0 -18px; scale: .97; filter: blur(2px); }
}
@keyframes nmTokH2bm {
  entry 0% { opacity: 0; translate: 0 40px; scale: .92; filter: blur(6px); }
  cover 25% { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
  cover 86% { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
  cover 100% { opacity: 0; translate: 0 -12px; scale: .97; filter: blur(1px); }
}
@keyframes nmTokB {
  entry 0% { opacity: 0; }
  cover 30% { opacity: 1; }
  cover 86% { opacity: 1; }
  cover 100% { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .prose h2 { animation-name: nmTokH2b; animation-timeline: view(block 72px 0px); }
    .page-head h1, .hero h1 { animation-name: nmRast, nmTokB; animation-timeline: auto, view(block 72px 0px); }
    @media (max-width: 900px) {
      .prose h2 { animation-name: nmTokH2bm; animation-timeline: view(block 68px 0px); }
      .page-head h1, .hero h1 { animation-timeline: auto, view(block 68px 0px); }
    }
  }
}
/* nm-pod-hover: efekat na stavkama podmenija */
@media (hover:hover){
.nav li > ul a{position:relative;display:block;transition:color .4s, opacity .4s, transform .5s cubic-bezier(.2,.7,.2,1), background-color .4s !important;}
.nav li > ul a::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--nm-karamel,#a97450);transition:width .5s cubic-bezier(.2,.7,.2,1), left .5s cubic-bezier(.2,.7,.2,1);}
.nav li > ul:hover a{opacity:.45;}
.nav li > ul a:hover,.nav li > ul a:focus-visible{opacity:1;color:var(--nm-karamel-txt,#8a5f3e) !important;transform:translateX(22px);background:transparent !important;}
.nav li > ul a:hover::before,.nav li > ul a:focus-visible::before{width:14px;left:-22px;}
}
@media (hover:hover) and (min-width:1001px){.nav li > ul a::before{left:1.15rem;}.nav li > ul a:hover::before,.nav li > ul a:focus-visible::before{left:calc(1.15rem - 22px);}}
/* RUSKI (6.10.2026): Hanken Grotesk nema cirilicu, pa ruske stranice koriste Golos Text.
   Fontovi se skidaju samo na ruskim stranicama; srpske ih ne ucitavaju. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;src:url(/files/fonts/golostext-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;src:url(/files/fonts/golostext-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;src:url(/files/fonts/golostext-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;src:url(/files/fonts/golostext-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
html[lang="ru"]{--f-body:"Golos Text","Helvetica Neue",Arial,sans-serif}
/* izbor jezika (7.10.2026) */
body:has(.vhero) .utility .tel, body:has(.vhero) .utility .langs .cur { color: #f6ede3; }
body:has(.vhero) .utility .langs a { color: rgba(246, 237, 227, 0.62); }
body:has(.vhero) .utility .langs a:hover { color: #f6ede3; }
body:has(.vhero) .utility .langs > * + ::before { background: rgba(246, 237, 227, 0.3); }
.nav-langs { display: none; }
@media (max-width: 860px) {
  .nav-langs { display: block; margin-top: 0.75rem; padding: 1rem 0 0.5rem; border-top: 1px solid var(--line); }
  .nav-langs .langs a, .nav-langs .langs .cur { font-size: 0.9375rem; }
}

/* NM logo u zaglavlju (6.11.2026) */
header.site .wordmark{display:flex!important;align-items:center;gap:16px;color:#f6ede3!important;text-decoration:none!important;transition:color 1.2s ease!important;font-size:0}
header.site .nmm{height:46px;width:auto;display:block;transition:height 1.2s ease!important}
header.site .nmdiv{display:block;width:1px;height:34px;background:#a97450}
header.site .nmname{font-family:Lora,Georgia,serif;font-size:23px;font-weight:400;text-transform:none;white-space:nowrap;line-height:1}
header.site.nm-cvrsto .wordmark,body:not(.is-home) header.site .wordmark{color:#16273b!important}
header.site.nm-cvrsto .nmm{height:38px}
header.site.nm-kompakt .nmname,header.site.nm-kompakt .nmdiv{display:none!important}
header.site{transition:background-color 1.2s ease,color 1.2s ease,border-color 1.2s ease,box-shadow 1.2s ease!important}
header.site .menu2>ul>li>a{transition:color .9s ease,background-size .45s cubic-bezier(.2,.7,.2,1)!important}
@media(max-width:700px){header.site .nmm{height:32px}header.site.nm-cvrsto .nmm{height:28px}header.site .nmname{font-size:16px}header.site .nmdiv{height:24px}header.site .wordmark{gap:9px}}