/* ============================ base.css ============================ */
/* base: reset, typography, primitives */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--sheet-050);
  -webkit-font-smoothing:antialiased;
}
img,picture,svg,video{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
iframe{border:0}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.01em;
  color:var(--navy-700);
  text-wrap:balance;
}
h1{font-size:var(--fs-800)}
h2{font-size:var(--fs-700)}
h3{font-size:var(--fs-600);line-height:1.15}
p{max-width:68ch}

a{color:var(--navy-700);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--navy-500)}

:focus-visible{outline:2px solid var(--navy-500);outline-offset:3px;border-radius:1px}

::selection{background:var(--navy-700);color:#fff}

.container{width:var(--container);margin-inline:auto}

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

.skip-link{
  position:absolute;top:-100%;left:var(--space-3);z-index:200;
  background:var(--navy-700);color:#fff;padding:var(--space-2) var(--space-3);
  text-decoration:none;font-weight:500;
}
.skip-link:focus{top:var(--space-2);color:#fff}

.flow>*+*{margin-top:var(--space-3)}
.flow>h2{margin-top:var(--space-5)}
.flow>h2:first-child{margin-top:0}

.text-link{
  position:relative;font-weight:500;color:var(--navy-700);text-decoration:none;
  background:none;border:0;cursor:pointer;padding:0;font-size:inherit;
}
.text-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-2) var(--ease-mech);
}
.text-link:hover::after,.text-link:focus-visible::after{transform:scaleX(1)}
.text-link:hover{color:var(--navy-500)}
.text-link--light{color:#fff}
.text-link--light:hover{color:var(--sheet-100)}

/* buttons: sharp rectangles, clip-path wipe on hover */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-400);
  padding:.85em 1.9em;text-decoration:none;border:1px solid transparent;
  border-left:2px solid var(--navy-500);
  overflow:hidden;isolation:isolate;white-space:nowrap;
}
.btn:focus-visible{outline:2px solid var(--navy-500);outline-offset:2px}
.btn span{position:relative;z-index:2}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;
  transform:translateX(-101%);
  transition:transform var(--dur-2) var(--ease-mech);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(0)}
.btn--primary{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.btn--primary::after{background:#fff}
.btn--primary:hover,.btn--primary:focus-visible{color:var(--navy-700)}
.btn--light{background:#fff;color:var(--navy-700);border-color:#fff;border-left-color:var(--navy-500)}
.btn--light::after{background:var(--navy-700)}
.btn--light:hover,.btn--light:focus-visible{color:#fff}


/* section heads: hairline rule + condensed title */
.section-head{margin-bottom:var(--space-5)}
.section-head h2{padding-top:var(--space-3);position:relative}
.section-head h2::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:var(--steel-400);transform-origin:left center;
}
.section-head p{margin-top:var(--space-2);color:var(--steel-700);max-width:52ch}
.section-head__sub{font-size:var(--fs-600);margin-bottom:var(--space-3)}

.tag-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tag-list li{
  border:1px solid var(--steel-400);color:var(--navy-700);
  padding:.35em .9em;font-size:var(--fs-300);border-radius:var(--radius);
  background:#fff;
}
.tag-list--stacked{flex-direction:column;align-items:flex-start}

.statement-list{display:grid;gap:0;border-top:1px solid var(--steel-400)}
.statement{
  padding:var(--space-4) 0;border-bottom:1px solid var(--steel-400);
  display:grid;gap:var(--space-2);
}
.statement h3{color:var(--navy-700)}
.statement p{color:var(--steel-700);max-width:60ch}
@media (min-width:820px){
  .statement{grid-template-columns:minmax(200px,1fr) minmax(0,2fr);align-items:baseline}
}

.scope-list{display:grid;gap:0;border-top:1px solid var(--sheet-100)}
.scope-list li{
  padding:var(--space-2) 0 var(--space-2) var(--space-4);
  border-bottom:1px solid var(--sheet-100);position:relative;
}
.scope-list li::before{
  content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:var(--navy-500);
}

.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* the hidden attribute always wins, even over display:flex components */
[hidden]{display:none!important}

/* below-fold light sections skip initial layout work (dark bands excluded so
   contrast tooling sees their real background) */
.home-refs,.industries-band,.process{
  content-visibility:auto;contain-intrinsic-size:auto 600px;
}
/* Iste uštede i za ostale trake ispod prvog ekrana: dok su van ekrana,
   pregledač im ne računa raspored ni iscrtavanje mreže i uglova. */
.drewmax-band{content-visibility:auto;contain-intrinsic-size:auto 760px}
.prefooter-cta{content-visibility:auto;contain-intrinsic-size:auto 420px}

/* ============================ layout.css ============================ */
/* layout: header, mobile menu, footer, prefooter CTA, inner hero */

/* ------------------------------------------------------------- header --- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--grid-line);
  transition:transform var(--dur-2) var(--ease-mech),background var(--dur-2),height var(--dur-2) var(--ease-mech),border-color var(--dur-2);
}
.site-header--transparent:not(.is-scrolled){
  background:transparent;border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.site-header.is-scrolled{height:var(--header-h-small)}
.site-header.is-hidden{transform:translateY(-100%)}
/* tri kolone: logo levo, navigacija na sredini prozora, jezik + dugme desno.
   Bočne kolone su 1fr, pa je srednja uvek na x-osi kontejnera — a kontejner je
   centriran, pa je to i sredina prozora. */
.site-header__inner{
  width:var(--container);margin-inline:auto;height:100%;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--space-4);
}
.site-header__brand{flex-shrink:0;display:block;justify-self:start;grid-column:1}
/* two stacked logos: colour on the light glass bar, white while the header is
   transparent over a photo (hero / inner banner) or over the open mobile menu */
.site-header__logo{position:relative;display:block;width:200px}
.site-header__logo-img{display:block;transition:opacity var(--dur-1) var(--ease-mech)}
.site-header__logo-img img{display:block;width:100%;height:auto}
.site-header__logo-img--white{position:absolute;inset:0;opacity:0}
.site-header--transparent:not(.is-scrolled) .site-header__logo-img--white{opacity:1}
.site-header--transparent:not(.is-scrolled) .site-header__logo-img--colour{opacity:0}
body.menu-open .site-header{
  background:transparent;border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.menu-open .site-header__logo-img--white{opacity:1}
body.menu-open .site-header__logo-img--colour{opacity:0}

.site-nav{justify-self:center;grid-column:2}
.site-nav__list{display:flex;gap:var(--space-4);align-items:center}
.site-nav__list>li>a{
  color:var(--navy-700);text-decoration:none;font-weight:500;font-size:1.0625rem;
  padding:.5em 0;position:relative;white-space:nowrap;
}
.site-nav__list>li>a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--navy-500);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-2) var(--ease-mech);
}
.site-nav__list>li>a:hover::after,
.site-nav__list>li>a[aria-current]::after{transform:scaleX(1)}
.site-header--transparent:not(.is-scrolled) .site-nav__list>li>a{color:#fff}
.site-header--transparent:not(.is-scrolled) .site-nav__list>li>a::after{background:#fff}

/* mega menu */
.site-nav__has-menu{position:relative}
.mega-menu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  min-width:420px;background:#fff;border:1px solid var(--sheet-100);
  border-top:2px solid var(--navy-700);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-1) var(--ease-mech),transform var(--dur-1) var(--ease-mech),visibility var(--dur-1);
  padding:var(--space-2) 0;
}
.site-nav__has-menu:hover .mega-menu,
.site-nav__has-menu:focus-within .mega-menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
.mega-menu__list a{
  display:block;padding:var(--space-2) var(--space-4);text-decoration:none;
  border-left:2px solid transparent;
  transition:border-color var(--dur-1),background var(--dur-1);
}
.mega-menu__list a:hover,.mega-menu__list a:focus-visible{
  background:var(--sheet-050);border-left-color:var(--navy-500);
}
.mega-menu__title{display:block;font-weight:600;color:var(--navy-700);font-size:var(--fs-400)}
.mega-menu__line{display:block;color:var(--steel-700);font-size:var(--fs-300)}

.site-header__aside{display:flex;align-items:center;gap:var(--space-4);flex-shrink:0;justify-self:end;grid-column:3}
.site-header__aside .lang-switch{font-size:.9375rem}
.lang-switch{display:flex;gap:2px;font-size:var(--fs-300)}
.lang-switch a{
  color:var(--steel-700);text-decoration:none;padding:.3em .5em;font-weight:500;
}
.lang-switch a{border-bottom:2px solid transparent}
.lang-switch a[aria-current]{color:var(--navy-700);border-bottom-color:var(--navy-500)}
.lang-switch a:hover{color:var(--navy-700)}
.site-header--transparent:not(.is-scrolled) .lang-switch a{color:rgba(255,255,255,.75)}
.site-header--transparent:not(.is-scrolled) .lang-switch a[aria-current],
.site-header--transparent:not(.is-scrolled) .lang-switch a:hover{color:#fff;border-bottom-color:#fff}
.lang-switch--dark a{color:rgba(255,255,255,.7)}
.lang-switch--dark a[aria-current],.lang-switch--dark a:hover{color:#fff;border-bottom-color:#fff}

.site-header__cta{font-size:1rem;padding:.62em 1.25em;white-space:nowrap}

/* hamburger */
.menu-toggle{
  display:none;width:44px;height:44px;position:relative;
  align-items:center;justify-content:center;
}
.menu-toggle__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.menu-toggle__bars{display:block;width:24px}
.menu-toggle__bars i{
  display:block;height:2px;background:var(--navy-700);margin:5px 0;
  transition:transform var(--dur-2) var(--ease-mech),opacity var(--dur-2);
}
.site-header--transparent:not(.is-scrolled) .menu-toggle__bars i{background:#fff}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i{background:#fff}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile full-screen menu */
.mobile-menu[hidden]{display:none}
.mobile-menu{
  position:fixed;inset:0;z-index:90;background:var(--navy-900);
  padding:calc(var(--header-h) + var(--space-4)) var(--space-4) var(--space-4);
  display:flex;flex-direction:column;justify-content:space-between;
  overflow-y:auto;
}
.mobile-menu__list a{
  display:block;color:#fff;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:2.2rem;line-height:1.25;
  padding:.1em 0;
}
.mobile-menu__sub a{
  font-family:var(--font-body);font-weight:400;font-size:var(--fs-400);
  color:rgba(255,255,255,.75);padding:.2em 0 .2em var(--space-4);
}
.mobile-menu__foot{
  margin-top:var(--space-5);display:grid;gap:var(--space-2);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-menu__phone,.mobile-menu__email{color:#fff;text-decoration:none;font-weight:500}

@media (max-width:1100px){
  .site-nav,.site-header__cta,.site-header .lang-switch{display:none}
  .menu-toggle{display:inline-flex}
  .site-header__logo{width:170px}
}

/* --------------------------------------------------------- inner hero --- */
.inner-hero{
  position:relative;min-height:320px;height:42vh;
  display:flex;align-items:flex-end;
  background-color:var(--navy-900);
  background-size:cover;background-position:center;
  overflow:hidden;
  border-bottom:1px solid var(--steel-400);
}
@media (min-width:820px){.inner-hero{height:52vh}}
.inner-hero__media{position:absolute;inset:0;background-size:cover;background-position:center}
/* Paralaksa u js/reveal.js pomera fotografiju za ±6 % visine banera, pa je
   slika 14 % viša od okvira — inače se pri skrolu otvara prazan pojas na vrhu
   ili dnu. Uvećava se okvir, ne slika, da se ne gubi rezolucija. */
.inner-hero__media picture{position:absolute;inset:-8% 0;display:block}
.inner-hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.inner-hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,40,69,.88) 0%,rgba(6,40,69,.55) 60%,rgba(6,40,69,.35) 100%);
}
.inner-hero__grid{
  position:absolute;inset:0;opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:64px 64px;
}
.inner-hero__content{position:relative;z-index:2;padding-bottom:var(--space-5);padding-top:calc(var(--header-h) + var(--space-5))}
.inner-hero__title{color:#fff;font-size:var(--fs-800)}
.inner-hero__lead{color:rgba(255,255,255,.85);margin-top:var(--space-2);max-width:56ch;font-size:var(--fs-500)}

.breadcrumb{margin-bottom:var(--space-3)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--space-1);font-size:var(--fs-300)}
.breadcrumb li{display:flex;align-items:center;gap:var(--space-1)}
.breadcrumb li+li::before{content:"/";color:rgba(255,255,255,.4)}
.breadcrumb a{color:rgba(255,255,255,.75);text-decoration:none}
.breadcrumb a:hover{color:#fff;text-decoration:underline}
.breadcrumb [aria-current]{color:#fff}

/* ------------------------------------------------------ prefooter CTA --- */
.prefooter-cta{
  background:var(--navy-900);color:#fff;
  padding:var(--space-7) 0;min-height:420px;
  position:relative;overflow:hidden;
}
/* photo behind the band: <picture> (not background-image) so avif/webp and
   lazy loading still apply; navy gradient keeps the left-hand text readable */
.prefooter-cta__media{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.prefooter-cta__media img{width:100%;height:100%;object-fit:cover;display:block}
.prefooter-cta::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(14,42,71,.92) 0%,rgba(14,42,71,.72) 55%,rgba(14,42,71,.55) 100%);
}
.prefooter-cta::before{
  content:"";position:absolute;inset:0;z-index:2;opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:64px 64px;
}
.prefooter-cta__inner{position:relative;z-index:3;display:grid;gap:var(--space-3);justify-items:start}
.prefooter-cta__title{color:#fff;font-size:var(--fs-700);max-width:18ch}
.prefooter-cta__text{color:rgba(255,255,255,.8)}
.prefooter-cta__actions{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.prefooter-cta__phone{
  color:#fff;text-decoration:none;font-family:var(--font-display);
  font-weight:700;font-size:var(--fs-600);letter-spacing:.02em;
}
.prefooter-cta__phone:hover{color:var(--sheet-100);text-decoration:underline}

/* ------------------------------------------------------------- footer --- */
.site-footer{background:var(--navy-900);color:rgba(255,255,255,.8)}
.site-footer a{color:rgba(255,255,255,.8);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer__grid{
  display:grid;gap:var(--space-5);
  padding:var(--space-6) 0 var(--space-5);
  grid-template-columns:1fr;
}
@media (min-width:640px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.site-footer__grid{grid-template-columns:2fr 1fr 1fr 1.2fr}}
.site-footer__head{
  font-family:var(--font-body);font-size:var(--fs-200);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--steel-400);
  margin-bottom:var(--space-3);
}
.site-footer__col ul{display:grid;gap:var(--space-1)}
.site-footer__col--company{max-width:34ch}
.site-footer__brand img{display:block;width:200px;height:auto}
.site-footer__tagline{margin-top:var(--space-2);font-size:var(--fs-300);color:var(--steel-400)}
.site-footer__address{margin-top:var(--space-3);font-size:var(--fs-300);line-height:1.7}
.site-footer__contact{margin-bottom:var(--space-4)}
.site-footer__hours{font-size:var(--fs-300);line-height:1.8}
.site-footer__partners{padding:var(--space-4) 0;border-top:1px solid rgba(255,255,255,.12)}
.partner-strip{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);align-items:center}
.partner-strip__item{
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-600);
  color:rgba(255,255,255,.85);letter-spacing:.04em;
}
.partner-strip__item a{color:inherit}
.partner-strip__item img{max-height:44px;width:auto}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding:var(--space-3) 0}
.site-footer__bottom-inner{
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;
  font-size:var(--fs-300);color:var(--steel-400);
}
.site-footer__bottom-inner a{color:var(--steel-400)}
.site-footer__bottom-inner a:hover{color:#fff}
.site-footer__credit{margin-left:auto}

/* ============================ components.css ============================ */
/* components: service rows, ref cards, spec tables, chips, marquee, process,
   form fields, assistant, back-to-top, info bar, preloader, cursor */

/* ------------------------------------------------------- service rows --- */
.service-rows{border-top:1px solid var(--steel-400)}
.service-row{border-bottom:1px solid var(--steel-400);position:relative}
.service-row::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;
  background:var(--navy-500);transition:height var(--dur-2) var(--ease-mech);
}
.service-row:hover::before,.service-row:focus-within::before{height:100%}
.service-row__link{
  display:block;text-decoration:none;color:inherit;
  padding:var(--space-4) 0 var(--space-4) 0;
  transition:padding-left var(--dur-2) var(--ease-mech);
}
.service-row:hover .service-row__link,.service-row:focus-within .service-row__link{padding-left:var(--space-2)}
.service-row__title{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-700);color:var(--navy-700);line-height:1;
}
.service-row__line{display:block;color:var(--steel-700);margin-top:var(--space-1);max-width:60ch}
.service-row__scope{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-3) var(--ease-out);
}
.service-row:hover .service-row__scope,
.service-row:focus-within .service-row__scope{grid-template-rows:1fr}
.service-row__scope-inner{overflow:hidden;display:block;min-height:0}
.service-row__scope-list{
  display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);
  padding-top:var(--space-3);font-size:var(--fs-300);color:var(--navy-700);
}
.service-row__scope-list span{position:relative;padding-left:var(--space-3)}
.service-row__scope-list span::before{
  content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--navy-500);
}
@media (hover:none),(pointer:coarse){
  .service-row__scope{grid-template-rows:1fr}
}

/* ---------------------------------------------------------- ref cards --- */
.ref-card{
  position:relative;background:#fff;border:1px solid var(--sheet-100);
  padding:var(--space-4);display:grid;gap:var(--space-2);align-content:start;
}
/* gornja linija se iscrtava na prelaz mišem; na dodir stoji stalno */
.ref-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
  background:var(--navy-700);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-2) var(--ease-mech);
}
.ref-card:hover::before,.ref-card:focus-within::before{transform:scaleX(1)}
@media (hover:none),(pointer:coarse){.ref-card::before{transform:scaleX(1)}}
.ref-card__date{
  font-family:var(--font-mono);font-size:var(--fs-200);color:var(--steel-700);
  letter-spacing:.06em;font-weight:500;font-variant-numeric:tabular-nums;
}
.ref-card__client{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-600);
  color:var(--navy-900);line-height:1.05;
}
.ref-card__meta{font-size:var(--fs-300);color:var(--steel-700)}
.ref-card__role{font-size:var(--fs-300);color:var(--navy-500);font-weight:500}
.ref-card__summary{font-size:var(--fs-300);color:var(--ink)}

/* --------------------------------------------------------- spec table --- */
.spec-table{border-top:1px solid var(--sheet-100);margin-top:var(--space-3)}
.spec-table>div{
  display:grid;grid-template-columns:minmax(110px,160px) 1fr;
  gap:var(--space-3);padding:var(--space-2) 0;
  border-bottom:1px solid var(--sheet-100);
}
.spec-table dt{
  font-family:var(--font-mono);font-size:.72rem;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel-700);padding-top:.35em;
}
.spec-table dd{font-size:var(--fs-300);font-weight:500;color:var(--navy-900);font-variant-numeric:tabular-nums}
.spec-table__scope dd{font-weight:400;color:var(--ink)}
.spec-table__scope ul{
  display:grid;gap:var(--space-1);
  border-left:2px solid var(--navy-500);padding-left:var(--space-3);
}

/* -------------------------------------------------------------- chips --- */
.chip{
  border:1px solid var(--steel-400);background:#fff;color:var(--navy-700);
  padding:.35em 1em;font-size:var(--fs-300);border-radius:var(--radius);
  transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1);
}
.chip:hover{border-color:var(--navy-700)}
.chip[aria-pressed="true"]{background:var(--navy-700);border-color:var(--navy-700);color:#fff}

/* ------------------------------------------------------------ marquee --- */
.industries-band{
  border-top:1px solid var(--steel-400);border-bottom:1px solid var(--steel-400);
  padding:var(--space-4) 0;overflow:hidden;background:#fff;
}
.marquee{overflow:hidden}
.marquee__track{
  display:inline-flex;gap:var(--space-6);white-space:nowrap;
  animation:marquee 60s linear infinite;will-change:transform;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-600);
  color:var(--steel-700);letter-spacing:.04em;position:relative;padding-right:var(--space-6);
}
.marquee__item::after{
  content:"";position:absolute;right:0;top:50%;width:20px;height:1px;background:var(--steel-400);
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ------------------------------------------------------------ process --- */
.process{padding:var(--space-7) 0;position:relative}
.process__steps{
  display:grid;gap:var(--space-5);counter-reset:step;
  grid-template-columns:1fr;position:relative;
}
@media (min-width:820px){.process__steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}}
.process__step{position:relative;padding-top:var(--space-3)}
.process__step::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--sheet-100);
}
.process__num{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-600);
  color:var(--navy-500);display:block;margin-bottom:var(--space-2);
}
.process__step h3{margin-bottom:var(--space-2)}
.process__step p{font-size:var(--fs-300);color:var(--steel-700)}
.process__line{height:2px;background:var(--sheet-100);margin-top:var(--space-5);overflow:hidden}
.process__line i{
  display:block;height:100%;background:var(--navy-500);
  transform:scaleX(0);transform-origin:left center;
}

/* -------------------------------------------------------- form fields --- */
.field{position:relative;margin-bottom:var(--space-4)}
.field input:not([type="checkbox"]),.field textarea,.field select{
  width:100%;border:0;border-bottom:1px solid var(--steel-400);
  background:transparent;padding:1.4em 0 .5em;border-radius:0;
  transition:border-color var(--dur-1);
  outline-offset:6px;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus,.field select:focus{
  border-bottom:2px solid var(--navy-500);margin-bottom:-1px;
}
.field:not(.field--check) label:not(.field__static-label){
  position:absolute;left:0;top:1.2em;color:var(--steel-700);
  pointer-events:none;transition:transform var(--dur-1) var(--ease-mech),font-size var(--dur-1),color var(--dur-1);
  transform-origin:left top;
}
.field:not(.field--check) input:focus~label,.field textarea:focus~label,
.field:not(.field--check) input:not(:placeholder-shown)~label,.field textarea:not(:placeholder-shown)~label{
  transform:translateY(-1.15em);font-size:var(--fs-200);color:var(--navy-500);
}
.field{display:flex;flex-direction:column}
.field__static-label{font-family:var(--font-mono);font-size:.72rem;color:var(--steel-700);font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.field select{cursor:pointer}
.field__error{
  color:var(--err);font-family:var(--font-mono);font-size:.75rem;margin-top:var(--space-1);
  max-height:0;overflow:hidden;opacity:0;order:3;
  transition:max-height var(--dur-2) var(--ease-out),opacity var(--dur-2);
}
.field.has-error .field__error{max-height:3em;opacity:1}
.field.has-error input,.field.has-error textarea{border-bottom-color:var(--err)}
.field--check{flex-direction:row;align-items:flex-start;gap:var(--space-2);flex-wrap:wrap}
.field--check input{width:18px;height:18px;margin-top:.25em;accent-color:var(--navy-700)}
.field--check label{font-size:var(--fs-300);max-width:60ch}
.field--check .field__error{flex-basis:100%}

.contact-form__submit{position:relative}
.contact-form__submit[disabled]{opacity:.7;cursor:wait}
/* Na telefonu dugme ide preko cele širine: plutajuće dugme asistenta stoji u
   donjem levom uglu i preklapalo je uzak taster baš na natpisu. Sada je natpis
   na sredini, a levi ugao dugmeta je i dalje dovoljno velika meta. */
@media (max-width:639px){
  .contact-form__submit{width:100%}
}
/* RUNDA 6 — dok traje slanje dugme ostaje tamno: beli prelaz sa hovera je
   ostajao uključen i pod mišem, pa je bela vrteška bila nevidljiva na belom. */
.contact-form__submit.is-sending::after,
.contact-form__submit.is-sending:hover::after{transform:translateX(-101%)}
.contact-form__submit.is-sending,
.contact-form__submit.is-sending:hover,
.contact-form__submit.is-sending:focus-visible{color:#fff}
.spinner{
  display:none;width:16px;height:16px;margin-left:var(--space-2);
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:spin 800ms linear infinite;position:relative;z-index:2;
}
.contact-form__submit.is-sending .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.contact-form__status{margin-top:var(--space-3);font-weight:500;min-height:1.5em}
.contact-form__status.is-ok{color:var(--ok)}
.contact-form__status.is-err{color:var(--err)}
/* RUNDA 6 — stanje greške: poruka, ponovni pokušaj i telefon kao rezerva */
.contact-form__status-text{margin:0;max-width:52ch}
.contact-form__status-actions{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);
  margin-top:var(--space-2);color:var(--ink);font-weight:400;max-width:none;
}
.contact-form__status-or{color:var(--steel-700)}
.contact-form__status-phone{color:var(--navy-700);font-weight:500;text-decoration:none}
.contact-form__status-phone:hover{text-decoration:underline}
/* poruka koja se vidi samo kada je JavaScript isključen */
.contact-form__noscript{
  border-left:2px solid var(--navy-500);background:var(--sheet-100);
  padding:var(--space-2) var(--space-3);margin-bottom:var(--space-3);
  color:var(--steel-700);font-size:var(--fs-300);max-width:none;
}
/* RUNDA 6 — potvrda koja zamenjuje formu posle uspešnog slanja */
.form-done{
  border:1px solid var(--steel-400);background:#fff;
  padding:var(--space-5);display:grid;gap:var(--space-2);
}
.form-done:focus{outline:none}
.form-done:focus-visible{outline:2px solid var(--navy-500);outline-offset:3px}
.form-done .spec-row{margin-bottom:var(--space-3)}
.form-done__title{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-700);
  line-height:1;letter-spacing:-.01em;color:var(--navy-700);max-width:none;
}
.form-done__text{color:var(--steel-700);max-width:44ch}

/* ---------------------------------------------------------- assistant --- */
.assistant__launcher{
  position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:80;
  width:56px;height:56px;border-radius:50%;
  background:var(--navy-700);color:#fff;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--navy-500);
  transition:transform var(--dur-1) var(--ease-mech),background var(--dur-1);
  --gear-inner:var(--navy-700);
}
.assistant__launcher:hover{transform:translateY(-2px);background:var(--navy-500)}
.assistant__launcher:hover{--gear-inner:var(--navy-500)}
.assistant__mark{display:block;width:30px;height:30px}
.assistant__mark svg{width:100%;height:100%}
.assistant__dot{
  position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;
  background:#fff;opacity:0;
}
.assistant__dot.did-pulse{opacity:1}

.assistant__panel{
  position:fixed;left:20px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:120;
  width:360px;max-width:calc(100vw - 40px);
  height:min(560px,80vh);
  background:#fff;border:1px solid var(--sheet-100);border-top:2px solid var(--navy-700);
  display:flex;flex-direction:column;
}
@media (max-width:639px){
  .assistant__panel{
    left:0;bottom:0;width:100%;max-width:none;height:100dvh;
    border:0;
  }
}
.assistant__head{
  background:var(--navy-900);color:#fff;padding:var(--space-3) var(--space-4);
  position:relative;flex-shrink:0;
}
.assistant__title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-500)}
.assistant__subtitle{font-size:var(--fs-300);color:rgba(255,255,255,.7)}
.assistant__close{
  position:absolute;top:var(--space-2);right:var(--space-2);
  width:40px;height:40px;color:#fff;display:flex;align-items:center;justify-content:center;
}
.assistant__close svg{width:20px;height:20px}
.assistant__messages{
  flex:1;overflow-y:auto;padding:var(--space-3);
  display:flex;flex-direction:column;gap:var(--space-2);
  background:var(--sheet-050);
}
.assistant__msg{
  max-width:85%;padding:var(--space-2) var(--space-3);
  font-size:var(--fs-300);line-height:1.5;
}
.assistant__msg--bot{background:#fff;border:1px solid var(--sheet-100);align-self:flex-start}
.assistant__msg--user{background:var(--navy-700);color:#fff;align-self:flex-end}
.assistant__msg--notice{
  background:transparent;border:1px dashed var(--steel-400);color:var(--steel-700);
  align-self:stretch;max-width:none;font-size:var(--fs-200);
}
.assistant__msg a{color:var(--navy-500);font-weight:500}
.assistant__msg--bot .assistant__links{margin-top:var(--space-2);display:grid;gap:var(--space-1)}
.assistant__links a{
  display:inline-block;font-size:var(--fs-300);color:var(--navy-700);
  text-decoration:underline;text-underline-offset:3px;
}
.assistant__typing{display:inline-flex;gap:4px;padding:var(--space-2) var(--space-3);align-self:flex-start;background:#fff;border:1px solid var(--sheet-100)}
.assistant__typing i{
  width:6px;height:6px;border-radius:50%;background:var(--steel-400);
  animation:typing 900ms ease-in-out infinite;
}
.assistant__typing i:nth-child(2){animation-delay:150ms}
.assistant__typing i:nth-child(3){animation-delay:300ms}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.assistant__chips{
  padding:var(--space-2) var(--space-3);display:flex;flex-wrap:wrap;gap:var(--space-1);
  border-top:1px solid var(--sheet-100);flex-shrink:0;background:#fff;
}
.assistant__chips:empty{display:none}
.assistant__composer{
  display:flex;gap:var(--space-2);padding:var(--space-2) var(--space-3);
  border-top:1px solid var(--sheet-100);flex-shrink:0;background:#fff;
  padding-bottom:calc(var(--space-2) + env(safe-area-inset-bottom));
}
.assistant__composer input{
  flex:1;border:1px solid var(--sheet-100);border-radius:var(--radius);
  padding:.6em .9em;font-size:var(--fs-300);
}
.assistant__composer input:focus{border-color:var(--navy-500);outline:none}
.assistant__send{
  width:44px;height:44px;background:var(--navy-700);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background var(--dur-1);
}
.assistant__send:hover{background:var(--navy-500)}
.assistant__send svg{width:20px;height:20px}

/* -------------------------------------------------------- back to top --- */
.back-to-top{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:80;
  width:56px;height:56px;border-radius:50%;
  background:#fff;border:1px solid var(--navy-700);color:var(--navy-700);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.back-to-top.is-visible{opacity:1;transform:translateY(0)}
.back-to-top__ring{position:absolute;inset:-1px;transform:rotate(-90deg)}
.back-to-top__ring circle{fill:none;stroke-width:2}
.back-to-top__track{stroke:var(--sheet-100)}
.back-to-top__progress{
  stroke:var(--navy-500);
  stroke-dasharray:157;stroke-dashoffset:157;stroke-linecap:round;
}
.back-to-top__chevron{width:20px;height:20px;position:relative;z-index:2}
.back-to-top.is-suppressed{opacity:0;pointer-events:none}

/* ---------------------------------------------------------- preloader --- */
/* RUNDA 6 — nacrtni list. Beo list sa plavom mrežom, logo u hairline okviru sa
   registarskim uglovima, ispod okvira traka napretka i brojač, iznad okvira
   oznaka kao u svakoj sekciji sajta. Na kraju se list preseca po vodoravnoj
   osi okvira i odlazi u dva panela — gornji naviše, donji naniže.
   Ceo redosled je CSS i kreće od trenutka kad se stilovi pročitaju: ništa ne
   čeka js/main.js, jer bi inače naslov hero sekcije (najveći element strane)
   čekao i preuzimanje skripte. Ponovna poseta u istoj sesiji list ne prikazuje;
   oznaku postavlja mala skripta u <head>. Za pregled: ?preloader=1. */
.preloader{
  position:fixed;inset:0;z-index:300;
  --pl-logo:220px;    /* širina logotipa; okvir je 24 px veći sa svake strane */
  --pl-pad:24px;
  /* Tvrdo ograničenje bez JavaScripta: kad redosled istekne, list prestaje da
     postoji za miša i za oko čak i ako se js/main.js nikada ne učita. */
  animation:pl-gone 1ms linear 1500ms forwards;
}
html:not(.js) .preloader{display:none}
html.preloaded .preloader{display:none}
/* Skrol je zaključan dok list stoji, ali NE preko overflow:hidden — to skida
   klizač (a scrollbar-gutter:stable dodaje prazan pojas i tamo gde klizača
   nema), pa bi ceo sadržaj skočio kada list ode. Zaključavanje radi skripta u
   <head> koja hvata wheel, touchmove i tastere za skrol; raspored ostaje
   netaknut. Ovde stoji samo ograničenje lančanog skrola. */
html.preloading{overscroll-behavior:none}
@keyframes pl-gone{to{visibility:hidden;pointer-events:none}}

/* --------------------------------------------------------------- list --- */
/* Dva panela leže jedan preko drugog i svaki pokazuje svoju polovinu (clip),
   pa je mreža savršeno neprekidna dok se list ne preseče. */
.preloader__panel{
  position:absolute;inset:0;background:#FFFFFF;
  background-image:
    linear-gradient(rgba(8,64,111,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(8,64,111,.03) 1px,transparent 1px),
    linear-gradient(rgba(8,64,111,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(8,64,111,.06) 1px,transparent 1px);
  background-size:8px 8px,8px 8px,64px 64px,64px 64px;
  background-position:0 0;
}
.preloader__panel--top{clip-path:inset(0 0 50% 0);animation:pl-split-top 450ms var(--ease-out) 1050ms forwards}
.preloader__panel--bottom{clip-path:inset(50% 0 0 0);animation:pl-split-bottom 450ms var(--ease-out) 1050ms forwards}
@keyframes pl-split-top{to{transform:translateY(-100%)}}
@keyframes pl-split-bottom{to{transform:translateY(100%)}}

/* -------------------------------------------------------- osa preseka --- */
/* Linija se iscrtava sleva preko celog prozora tačno po sredini okvira i
   odlazi naviše sa gornjim panelom — kao da je list presečen po njoj. */
.preloader__rule{
  position:absolute;left:0;right:0;bottom:50%;height:1px;background:var(--navy-700);
  transform:scaleX(0);transform-origin:left center;
  animation:pl-rule 100ms linear 950ms forwards;
}
@keyframes pl-rule{to{transform:scaleX(1)}}

/* ------------------------------------------------------------- sadržaj --- */
/* .preloader__stage je sam okvir: centriran je on, ne cela grupa, pa je
   vodoravna osa okvira uvek na sredini prozora — tu ide linija i tu je rez. */
.preloader__stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.preloader__frame{position:relative;padding:var(--pl-pad);border:1px solid var(--steel-400)}
.preloader__logo{display:block;opacity:0;animation:pl-in 150ms var(--ease-out) forwards}
.preloader__logo img{display:block;width:var(--pl-logo);height:auto}
@keyframes pl-in{to{opacity:1}}

.preloader__mark{
  position:absolute;width:12px;height:12px;pointer-events:none;
  background:
    linear-gradient(var(--navy-500),var(--navy-500)) no-repeat,
    linear-gradient(var(--navy-500),var(--navy-500)) no-repeat;
  animation:150ms var(--ease-out) forwards;
}
.preloader__mark--tl{top:-1px;left:-1px;background-size:12px 1px,1px 12px;background-position:0 0,0 0;animation-name:pl-mark-tl}
.preloader__mark--tr{top:-1px;right:-1px;background-size:12px 1px,1px 12px;background-position:100% 0,100% 0;animation-name:pl-mark-tr}
.preloader__mark--bl{bottom:-1px;left:-1px;background-size:12px 1px,1px 12px;background-position:0 100%,0 100%;animation-name:pl-mark-bl}
.preloader__mark--br{bottom:-1px;right:-1px;background-size:12px 1px,1px 12px;background-position:100% 100%,100% 100%;animation-name:pl-mark-br}
@keyframes pl-mark-tl{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pl-mark-tr{from{clip-path:inset(0 0 100% 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes pl-mark-bl{from{clip-path:inset(100% 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pl-mark-br{from{clip-path:inset(100% 0 0 100%)}to{clip-path:inset(0 0 0 0)}}

.preloader__label{
  position:absolute;left:0;bottom:100%;margin-bottom:var(--space-3);
  font-family:var(--font-mono);font-weight:400;font-size:.75rem;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel-700);
  white-space:nowrap;max-width:none;
  opacity:0;animation:pl-in 150ms var(--ease-out) forwards;
}
/* Traka je široka koliko i logo, a brojač stoji uz desnu ivicu okvira — kao
   kota na crtežu, a ne kao broj koji lebdi na sredini. */
.preloader__meter{
  position:absolute;left:0;top:100%;margin-top:var(--space-3);
  width:calc(var(--pl-logo) + var(--pl-pad) * 2);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
}
.preloader__track{display:block;width:var(--pl-logo);height:1px;background:var(--steel-400);overflow:hidden}
.preloader__fill{
  display:block;width:100%;height:100%;background:var(--navy-700);
  transform:scaleX(0);transform-origin:left center;
  animation:pl-fill 800ms var(--ease-mech) 150ms forwards;
}
@keyframes pl-fill{to{transform:scaleX(1)}}
.preloader__count{
  font-family:var(--font-mono);font-weight:500;font-size:.8rem;line-height:1;
  letter-spacing:.12em;color:var(--navy-500);font-variant-numeric:tabular-nums;
}

@media (max-width:639px){
  .preloader{--pl-logo:150px}
  .preloader__label{font-size:.6875rem}
  .preloader__count{font-size:.75rem}
}

/* Umanjen pokret: list se pojavi, logo i okvir su odmah tu, list nestaje za
   200 ms. Traka je popunjena, pa brojač odmah pokazuje 100 — nema odbrojavanja. */
@media (prefers-reduced-motion:reduce){
  .preloader{animation-delay:400ms}
  .preloader__logo,.preloader__label{animation:none;opacity:1}
  .preloader__mark{animation:none;clip-path:none}
  .preloader__fill{animation:none;transform:scaleX(1)}
  .preloader__rule{display:none}
  /* Bez preseka nema ni dva panela: donji se sklanja u celosti. Da je samo
     njegov sadržaj bio sakriven, njegova bela podloga bi (kao kasniji element
     u dokumentu) prekrila logo i okvir gornjeg panela — beo list bez ičega. */
  .preloader__panel{clip-path:none;animation:pl-fade 200ms linear 200ms forwards}
  .preloader__panel--bottom{display:none}
}
@keyframes pl-fade{to{opacity:0}}

/* ------------------------------------------------------ custom cursor --- */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:400;pointer-events:none;
  border-radius:50%;display:none;
}
.cursor-dot{width:8px;height:8px;background:var(--navy-500);margin:-4px 0 0 -4px}
.cursor-ring{
  width:36px;height:36px;border:1px solid var(--navy-500);margin:-18px 0 0 -18px;
  transition:width var(--dur-2) var(--ease-out),height var(--dur-2) var(--ease-out),margin var(--dur-2) var(--ease-out),opacity var(--dur-2);
  display:none;align-items:center;justify-content:center;
  font-size:var(--fs-200);color:#fff;font-weight:600;
}
.cursor-ring.is-label{
  width:64px;height:64px;margin:-32px 0 0 -32px;
  background:rgba(8,64,111,.85);border-color:transparent;
}
.cursor-ring.is-hidden,.cursor-dot.is-hidden{opacity:0}
/* Do prvog pomeranja miša tačka i prsten nemaju gde da stoje, pa su stajali u
   gornjem levom uglu prozora. Preko belog lista preloadera to se videlo kao
   plavi krug u ćošku. Prikazuju se tek kada znamo gde je pokazivač. */
.cursor-dot:not(.is-armed),.cursor-ring:not(.is-armed){opacity:0}
@media (hover:hover) and (pointer:fine){
  html.js .cursor-dot,html.js .cursor-ring{display:flex}
}

/* ============================ motion.css ============================ */
/* motion: reveal states, transitions, reduced-motion kill switch */

/* single reveal style: hairline draws, block rises + fades (JS adds .is-revealed) */
html.js [data-reveal]{opacity:0;transform:translateY(16px)}
html.js [data-reveal].is-revealed{
  opacity:1;transform:translateY(0);
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
}
html.js .section-head[data-reveal] h2::before{transform:scaleX(0)}
html.js .section-head[data-reveal].is-revealed h2::before{
  transform:scaleX(1);
  transition:transform var(--dur-3) var(--ease-mech) 120ms;
}

/* page transition: main fades on internal navigation */
html.js main{opacity:1;transition:opacity var(--dur-1) var(--ease-out)}
html.js.is-leaving main{opacity:0}

/* hero title word reveal (pre-wrapped at build; GSAP sets the offset at runtime
   so the words are visible on first paint and without JS) */
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word__inner{display:inline-block}

/* magnetic buttons get transform from JS; keep transitions off during drag */
.btn[data-magnetic]{transition:transform var(--dur-1) var(--ease-out)}

/* ------------------------------------------------- reduced motion kill --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html.js [data-reveal]{opacity:1;transform:none}
  html.js .section-head[data-reveal] h2::before{transform:scaleX(1)}
  .word__inner{transform:none!important}
  .marquee__track{animation:none!important;white-space:normal;flex-wrap:wrap}
  .marquee__track .marquee__item:nth-child(n+8){display:none}
  .hero__slide picture{animation:none!important;transform:none!important}
  .cursor-dot,.cursor-ring{display:none!important}
}

/* ======================= pages/404.css ======================= */
.notfound{
  min-height:100svh;background:var(--navy-900);
  display:flex;align-items:center;
  position:relative;overflow:hidden;
}
.notfound::before{
  content:"";position:absolute;inset:0;opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:64px 64px;
}
.notfound__inner{position:relative;padding:calc(var(--header-h) + var(--space-6)) 0 var(--space-7)}
.notfound__code{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(6rem,22vw,16rem);line-height:.9;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4);
}
.notfound h1{color:#fff;margin-top:var(--space-3)}
.notfound__text{color:rgba(255,255,255,.75);margin-top:var(--space-3);max-width:44ch}
.notfound__actions{
  margin-top:var(--space-5);display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap;
}

/* ======================= pages/about.css ======================= */
.about-body{padding:var(--space-7) 0}
.about-body__grid{display:grid;gap:var(--space-5)}
@media (min-width:1020px){
  .about-body__grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--space-7)}
}
.about-body__text p{font-size:var(--fs-500);line-height:1.65}
.about-body__aside{align-self:start}
.pull-quote{
  border-left:2px solid var(--navy-500);
  padding:var(--space-3) 0 var(--space-3) var(--space-4);
}
.pull-quote p{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-600);line-height:1.3;color:var(--navy-700);
}
.about-highlights{padding:0 0 var(--space-7)}
.about-industries{padding:0 0 var(--space-7)}

/* ======================= pages/contact.css ======================= */
.contact-page{padding:var(--space-7) 0 0}
.contact-page__grid{display:grid;gap:var(--space-6);padding-bottom:var(--space-7)}
@media (min-width:1020px){
  .contact-page__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--space-7)}
}
.contact-details h2,.contact-form-wrap h2{margin-bottom:var(--space-4)}
.contact-details__list{display:grid;gap:var(--space-3)}
.contact-details__list>div{
  border-top:1px solid var(--sheet-100);padding-top:var(--space-3);
  display:grid;gap:var(--space-1);
}
.contact-details__list dt{
  font-size:var(--fs-200);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel-700);
}
.contact-details__list dd a{color:var(--navy-700);font-weight:500;text-decoration:none}
.contact-details__list dd a:hover{text-decoration:underline}
.contact-details__note{
  margin-top:var(--space-4);color:var(--steel-700);font-size:var(--fs-300);
  border-left:2px solid var(--navy-500);padding-left:var(--space-3);
}
.contact-map iframe{width:100%;height:420px;display:block;filter:grayscale(.35)}

/* ======================= pages/home.css ======================= */
/* home: hero slider, intro, services, drewmax band, refs strip, industries, process */

.hero{
  position:relative;height:100vh;min-height:100svh;
  overflow:hidden;background:var(--navy-900);
}
@supports (height:100dvh){.hero{height:100dvh}}
.hero__slides{position:absolute;inset:0}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  background-size:cover;background-position:center;
  transition:opacity var(--dur-4) var(--ease-out);
}
.hero__slide.is-active{opacity:1}
.hero__slide picture{position:absolute;inset:0;will-change:transform}
.hero__slide img{width:100%;height:100%;object-fit:cover}
.hero__slide.is-active picture{animation:kenburns 7s var(--ease-out) forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,40,69,.45) 0%,rgba(6,40,69,.78) 100%);
}

.hero__content{
  position:relative;z-index:5;min-height:100%;
  display:grid;align-content:center;
  padding-top:calc(var(--header-h) + clamp(2rem,6vh,4rem));
  padding-bottom:clamp(var(--space-5),10vh,var(--space-7));
}
/* slides stack in the same grid cell and cross-fade */
.hero__copy{
  grid-area:1/1;max-width:min(72vw,1120px);
  opacity:0;visibility:hidden;transition:opacity var(--dur-3) var(--ease-out),visibility var(--dur-3);
}
@media (max-width:1023px){.hero__copy{max-width:100%}}
.hero__copy.is-active{opacity:1;visibility:visible}
.hero__title{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-900);line-height:.94;letter-spacing:-.015em;
  color:#fff;text-wrap:balance;
}
.hero__lead{
  color:rgba(255,255,255,.85);margin-top:var(--space-3);
  font-size:var(--fs-500);max-width:46ch;
}
.hero__cta{margin-top:var(--space-4)}

/* vodoravni pokazivač slajda: tri segmenta 48×2 px, dole na sredini hero-a.
   Aktivni se puni od navy-500 ka beloj tokom trajanja slajda (6 s). */
.hero__progress{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(24px,4vh,40px);z-index:6;
  display:flex;gap:16px;
}
.hero__seg{
  width:48px;height:24px;position:relative;cursor:pointer;display:block;
  background:transparent;border:0;padding:0;
}
.hero__seg i{
  position:absolute;left:0;top:50%;margin-top:-1px;
  width:100%;height:2px;display:block;overflow:hidden;
  background:rgba(147,149,152,.5);
}
.hero__seg i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy-500),#fff);
  transform:scaleX(0);transform-origin:left center;
}
.hero__seg.is-active i::after{transform:scaleX(1);transition:transform 6s linear}
.hero__seg.is-done i::after{transform:scaleX(1);transition:none}
.hero__seg:hover i{background:rgba(255,255,255,.55)}
@media (prefers-reduced-motion:reduce){
  .hero__seg.is-active i::after{transform:scaleX(1);transition:none}
}

/* arrows: hidden at rest, fade in on pointer movement, never on touch */
.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:7;
  width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-out),background var(--dur-1);
}
.hero__arrow svg{width:22px;height:22px}
.hero__arrow--prev{left:clamp(16px,2.5vw,40px)}
.hero__arrow--next{right:clamp(16px,2.5vw,40px)}
.hero.arrows-visible .hero__arrow{opacity:1;pointer-events:auto}
.hero__arrow:hover{background:rgba(255,255,255,.12)}
@media (hover:none),(pointer:coarse){.hero__arrow{display:none}}
/* Strelice stoje uz ivicu prozora, pa naslov mora da se povuče od nje: uvlaka
   je tačno onoliko koliko nedostaje do 152 px (strelica 56 px + 56 px zazora
   + clamp odstojanje). Iznad ~1640 px margina kontejnera je već dovoljna. */
@media (min-width:1024px){
  .hero__content{padding-left:clamp(0px,calc(812px - 50vw),136px)}
}
/* ispod 1024 px strelice se sklanjaju — na toj širini nema mesta za zazor od
   56 px, a slajdovi se menjaju segmentima, prevlačenjem i tastaturom */
@media (max-width:1023px){.hero__arrow{display:none}}

.hero__counter{
  position:absolute;right:var(--space-4);bottom:var(--space-4);z-index:6;
  color:rgba(255,255,255,.75);
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-500);
  letter-spacing:.12em;
}
.hero__counter [data-slide-current]{color:#fff}
/* na telefonu brojač i pokazivač dele isti red i preklapaju se (izmereno −11 px
   na 390, −46 px na 320), pa brojač ide iznad pokazivača, na sredinu */
@media (max-width:639px){
  .hero__counter{
    left:50%;right:auto;transform:translateX(-50%);
    bottom:calc(clamp(24px,4vh,40px) + 34px);
    font-size:var(--fs-400);
  }
}
/* na najužim ekranima pokazivač bi dodirnuo dugme asistenta */
@media (max-width:359px){
  .hero__progress{gap:12px}
  .hero__seg{width:40px}
}

/* ------------------------------------------------------------- intro --- */
.home-intro{padding:var(--space-7) 0;background:var(--sheet-050)}
.home-intro__inner{
  border-left:2px solid var(--navy-700);
  padding-left:clamp(var(--space-4),4vw,var(--space-6));
}
.home-intro__text{
  font-size:var(--fs-600);line-height:1.5;color:var(--ink);max-width:52ch;
}
.home-intro__since{
  margin-top:var(--space-3);color:var(--steel-700);
  font-size:var(--fs-300);letter-spacing:.08em;text-transform:uppercase;font-weight:600;
}

/* ----------------------------------------------------------- services --- */
.home-services{padding:var(--space-7) 0}
@media (min-width:1020px){
  .home-services__inner{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2.4fr);gap:var(--space-6)}
  .section-head--pinned{position:sticky;top:96px;align-self:start;margin-bottom:0}
}

/* -------------------------------------------------------- drewmax band --- */
.drewmax-band{
  background:var(--navy-900);color:#fff;position:relative;overflow:hidden;
  padding:var(--space-8) 0;
}
.drewmax-band__gear{
  position:absolute;right:-10%;top:50%;width:min(60vw,640px);aspect-ratio:1;
  transform:translateY(-50%);opacity:.05;color:#fff;--gear-inner:transparent;
  pointer-events:none;
}
.drewmax-band__gear svg{width:100%;height:100%}
.drewmax-band__inner{position:relative;display:grid;gap:var(--space-4);justify-items:start}
.drewmax-band__eyebrow{
  color:var(--steel-400);font-family:var(--font-body);font-size:var(--fs-300);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.drewmax-band__text{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-700);line-height:1.15;color:#fff;max-width:28ch;
}
.drewmax-band__territories ul{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.drewmax-band__territories li{
  position:relative;padding-left:var(--space-3);color:rgba(255,255,255,.85);
  font-size:var(--fs-400);
}
.drewmax-band__territories li::before{
  content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--navy-500);
}

/* --------------------------------------------------------- refs strip --- */
.home-refs{
  padding:var(--space-7) 0;background-color:var(--sheet-100);
  border-top:1px solid var(--sheet-100);border-bottom:1px solid var(--sheet-100);
}
/* Klizač: prozorčić seče, traka se pomera transformom. Broj vidljivih kartica
   stoji u --per i čita ga js/ref-slider.js — jedan izvor istine. */
.home-refs__viewport{overflow:hidden;padding-block:2px var(--space-2)}
.home-refs__track{
  --per:1;
  display:flex;gap:var(--space-3);width:auto;
  transform:translate3d(0,0,0);
}
@media (min-width:640px){.home-refs__track{--per:2}}
@media (min-width:1024px){.home-refs__track{--per:3}}
@media (min-width:1280px){.home-refs__track{--per:4}}
.home-refs__track>.ref-card{
  flex:0 0 calc((100% - (var(--per) - 1) * var(--space-3)) / var(--per));
  max-width:calc((100% - (var(--per) - 1) * var(--space-3)) / var(--per));
}
.home-refs__foot{margin-top:var(--space-3)}

/* strelice u redu zaglavlja */
.home-refs__controls{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.strip-nav{display:flex;gap:var(--space-2)}
.strip-nav__btn{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--navy-700);color:var(--navy-700);background:transparent;
  display:grid;place-items:center;
  transition:background var(--dur-1) var(--ease-mech),color var(--dur-1) var(--ease-mech),opacity var(--dur-1);
}
.strip-nav__btn svg{width:20px;height:20px}
.strip-nav__btn:hover:not(:disabled){background:var(--navy-700);color:#fff}
.strip-nav__btn:disabled{opacity:.35;cursor:default}

/* tačkice ispod klizača — jedna po kartici */
.home-refs__dots{
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px;
  margin-top:var(--space-3);
}
.home-refs__dots.is-hidden{display:none}
.home-refs__dot{
  width:24px;height:24px;display:grid;place-items:center;
  background:transparent;border:0;padding:0;cursor:pointer;
}
.home-refs__dot::before{
  content:"";width:8px;height:8px;border-radius:50%;
  border:1px solid var(--steel-400);background:transparent;
  transition:background var(--dur-1) var(--ease-mech),border-color var(--dur-1);
}
.home-refs__dot.is-active::before{background:var(--navy-500);border-color:var(--navy-500)}
.home-refs__dot:hover::before{border-color:var(--navy-700)}
@media (max-width:639px){
  .home-refs__controls{display:none}
  /* dugme ide na sredinu, ispod tačkica — uz levu ivicu ga prekriva
     plutajuće dugme asistenta */
  .home-refs__foot{display:flex;justify-content:center}
}
@media (min-width:640px){.home-refs__foot{display:none}}

/* ------------------------------------------------------------ process --- */
/* shared styles in components.css */

/* ======================= pages/partners.css ======================= */
.partners-drewmax{padding:var(--space-7) 0}
.partners-drewmax__grid{display:grid;gap:var(--space-5)}
@media (min-width:1020px){
  .partners-drewmax__grid{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:var(--space-7)}
}
.partners-drewmax__aside{
  align-self:start;background:var(--navy-900);color:#fff;padding:var(--space-4);
}
.partners-drewmax__aside h3{color:#fff;margin-bottom:var(--space-3)}
.partners-drewmax__aside .tag-list li{
  background:transparent;border-color:rgba(255,255,255,.3);color:#fff;
}
.partners-others{padding:0 0 var(--space-7)}
.partner-cards{display:grid;gap:var(--space-3)}
@media (min-width:820px){.partner-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.partner-card{
  background:#fff;border:1px solid var(--sheet-100);border-top:2px solid var(--navy-700);
  padding:var(--space-4);
}
.partner-card__name{margin-bottom:var(--space-1)}
.partner-card__country{
  font-size:var(--fs-200);color:var(--steel-700);letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;margin-bottom:var(--space-2);
}
.partner-card__line{font-size:var(--fs-300);color:var(--steel-700)}

/* ======================= pages/privacy.css ======================= */
.privacy-page{padding:var(--space-7) 0}
.privacy-page__inner{max-width:72ch}
.privacy-page h2{
  padding-top:var(--space-3);position:relative;font-size:var(--fs-600);
}
.privacy-page h2::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--steel-400);
}
.privacy-page__updated{
  margin-top:var(--space-6);color:var(--steel-700);font-size:var(--fs-300);
}

/* ======================= pages/references.css ======================= */
.refs-page{padding:var(--space-6) 0 var(--space-7)}
.refs-filters{
  display:grid;gap:var(--space-3);margin-bottom:var(--space-6);
  padding-bottom:var(--space-4);border-bottom:1px solid var(--steel-400);
}
.refs-filters__group{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.refs-filters__label{
  font-size:var(--fs-200);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel-700);min-width:90px;
}

.refs-timeline{display:grid;gap:var(--space-5)}
.refs-entry{display:grid;gap:var(--space-3)}
@media (min-width:820px){
  .refs-entry{grid-template-columns:80px minmax(0,1fr)}
}
.refs-entry__rail{position:relative;display:none}
@media (min-width:820px){
  .refs-entry__rail{display:block}
  .refs-entry__rail::before{
    content:"";position:absolute;left:6px;top:8px;bottom:-40px;width:1px;background:var(--steel-400);
  }
  .refs-entry:last-of-type .refs-entry__rail::before{bottom:8px}
  .refs-entry__rail::after{
    content:"";position:absolute;left:3px;top:8px;width:7px;height:7px;
    background:var(--navy-500);
  }
  .refs-entry__rail span{
    position:absolute;left:22px;top:0;
    font-family:var(--font-display);font-weight:700;color:var(--steel-400);
    font-size:var(--fs-500);
  }
}
.refs-entry__card{
  background:#fff;border:1px solid var(--sheet-100);border-top:2px solid var(--navy-700);
  padding:var(--space-4);
}
.refs-entry__date{
  font-size:var(--fs-200);color:var(--steel-700);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.refs-entry__client{font-size:var(--fs-700);margin:.1em 0 .2em}
.refs-entry__summary{color:var(--steel-700)}
.refs-entry.is-hidden{display:none}
.refs-entry__title{font-weight:600;color:var(--ink);margin:.1em 0 .4em}
.refs-entry__main{display:grid;gap:var(--space-3)}
@media (min-width:760px){
  .refs-entry__main{grid-template-columns:280px minmax(0,1fr);gap:var(--space-4);align-items:start}
}
.refs-entry__thumb,.refs-entry__shot{
  display:block;width:100%;padding:0;background:none;cursor:zoom-in;overflow:hidden;
  border:1px solid var(--sheet-100);
}
.refs-entry__thumb img,.refs-entry__shot img{
  display:block;width:100%;height:auto;object-fit:cover;
  transition:transform var(--dur-3) var(--ease-mech);
}
.refs-entry__thumb img{aspect-ratio:3/2}
@media (min-width:760px){.refs-entry__thumb img{aspect-ratio:4/5}}
.refs-entry__shot img{aspect-ratio:3/2}
.refs-entry__thumb:hover img,.refs-entry__shot:hover img{transform:scale(1.04)}
/* fotografije ispod tabele ostaju male — gornja granica sprečava da se dve
   fotografije razvuku preko cele širine kartice */
.refs-entry__strip{
  display:grid;gap:var(--space-2);margin-top:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(150px,220px));
}
.refs-empty{padding:var(--space-5) 0;color:var(--steel-700)}
.refs-note{margin-top:var(--space-6);color:var(--steel-700);font-size:var(--fs-300)}

/* ======================= pages/service.css ======================= */
.service-layout{
  display:grid;gap:var(--space-6);
  padding:var(--space-7) 0;
}
@media (min-width:1020px){
  .service-layout{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);align-items:start}
}
.service-article{max-width:72ch}
.service-section{margin-bottom:var(--space-6)}
.service-section h2,.service-scope h2,.service-related h2,.service-drewmax h2{
  padding-top:var(--space-3);position:relative;margin-bottom:var(--space-3);
}
.service-section h2::before,.service-scope h2::before,.service-related h2::before,.service-drewmax h2::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--steel-400);
}
.service-drewmax{
  margin-bottom:var(--space-6);
  background:#fff;border:1px solid var(--sheet-100);border-top:2px solid var(--navy-700);
  padding:var(--space-4);
}
.service-drewmax h2::before{display:none}
.service-drewmax h2{padding-top:0}
.service-drewmax p{margin-bottom:var(--space-3)}
.service-scope{margin-bottom:var(--space-6)}
.service-related__list{display:grid;gap:var(--space-3);margin-bottom:var(--space-3)}
@media (min-width:640px){.service-related__list{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ref-card--flat{border-top:1px solid var(--sheet-100);border-left:2px solid var(--navy-700)}

/* Nekada je ova grupa bila "sticky". Otkako desna kolona ima punu traku
   sadržaja ispod nje, zakačena kartica bi se probijala kroz razmake između
   fotografija — zato sada prati normalan tok stranice. */
.service-sidebar__sticky{display:grid;gap:var(--space-4)}
.service-sidebar__nav{background:#fff;border:1px solid var(--sheet-100);padding:var(--space-4)}
.service-sidebar__nav h2,.service-sidebar__contact h2{
  font-size:var(--fs-500);margin-bottom:var(--space-3);
}
.service-sidebar__nav ul{display:grid}
.service-sidebar__nav a{
  display:block;padding:var(--space-2) 0;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--sheet-100);font-size:var(--fs-300);
  transition:color var(--dur-1),padding-left var(--dur-1) var(--ease-mech);
}
.service-sidebar__nav li:last-child a{border-bottom:0}
.service-sidebar__nav a:hover{color:var(--navy-500);padding-left:var(--space-1)}
.service-sidebar__contact{
  background:var(--navy-900);color:#fff;padding:var(--space-4);
  display:grid;gap:var(--space-3);justify-items:start;
}
.service-sidebar__contact h2{color:#fff}
.service-sidebar__contact p{color:rgba(255,255,255,.8);font-size:var(--fs-300)}
.service-sidebar__phone{
  color:#fff;text-decoration:none;font-family:var(--font-display);
  font-weight:700;font-size:var(--fs-600);
}
.service-sidebar__phone:hover{text-decoration:underline;color:#fff}

/* ======================= pages/services.css ======================= */
.services-list{padding:var(--space-7) 0}
@media (min-width:1020px){
  .services-list__inner{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2.4fr);gap:var(--space-6)}
  .section-head--pinned{position:sticky;top:96px;align-self:start;margin-bottom:0}
}
.services-why{padding:0 0 var(--space-7)}
.process--compact{padding:0 0 var(--space-7)}


/* ======================= components/media.css =======================
   Zajednički obrazac za fotografije. Svaka fotografija je umotana u
   <figure class="media media--<kontekst>">, pa se prave fotografije klijenta
   mogu zameniti bez diranja rasporeda. */
.media{position:relative;margin:0;isolation:isolate}
.media>picture{display:block;position:relative;z-index:1;height:100%;overflow:hidden}
.media img{display:block;width:100%;height:100%;object-fit:cover}
/* blueprint hairline frame, offset to the bottom-right */
.media--framed::after{
  content:"";position:absolute;inset:12px -12px -12px 12px;
  border:1px solid var(--steel-400);z-index:0;pointer-events:none;
}
.media__caption{
  margin-top:var(--space-2);font-size:var(--fs-300);color:var(--steel-700);
  line-height:1.4;
}
.media--drewmax .media__caption{color:rgba(255,255,255,.7)}
/* parallax is applied by js/reveal.js on fine pointers only */
[data-parallax-media]>picture>img{will-change:transform}
@media (prefers-reduced-motion:reduce){[data-parallax-media]>picture>img{transform:none!important}}

/* home intro strip: text left, photo right */
.home-intro__grid{display:grid;gap:var(--space-5)}
.home-intro__grid .media--intro{order:-1}
.media--intro{aspect-ratio:16/9}
@media (min-width:900px){
  .home-intro__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:center}
  .home-intro__grid .media--intro{order:0}
  .media--intro{aspect-ratio:4/3}
}

/* DREWMAX band: navy duotone photo in the right column */
.drewmax-band__grid{display:grid;gap:var(--space-5);position:relative}
@media (min-width:900px){
  .drewmax-band__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-6);align-items:center}
}
.media--drewmax{aspect-ratio:3/2;background:var(--navy-700)}
.media--drewmax img{mix-blend-mode:luminosity;opacity:.9}
.media--drewmax::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(140deg,rgba(16,104,160,.35) 0%,rgba(6,40,69,.55) 100%);
}
.drewmax-band__gear{opacity:.035}

/* about page */
.media--about{aspect-ratio:4/3}
.media--about-wide{aspect-ratio:21/9;margin-bottom:var(--space-5)}
@media (min-width:900px){
  .about-body__grid .about-body__text{grid-column:1}
}

/* services overview: alternating photo bands between service rows */
.services-break{margin:var(--space-5) 0;display:grid;gap:var(--space-4)}
.media--services{aspect-ratio:16/9}
@media (min-width:900px){
  .services-break{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .services-break--right .media--services{order:2}
  .media--services{aspect-ratio:3/2}
}
.services-break__note{color:var(--steel-700);font-size:var(--fs-400);line-height:1.6}

/* references page: photo strip above the timeline */
.refs-strip{display:grid;gap:var(--space-3);margin-bottom:var(--space-6)}
@media (min-width:760px){.refs-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.media--refs{aspect-ratio:3/2}

/* partners page */
.media--partners{aspect-ratio:3/2;margin-top:var(--space-4)}

/* contact page: small photo above the details */
.media--contact{aspect-ratio:16/9;margin-bottom:var(--space-4);max-width:420px}

/* full-width photo inside a service article */
.media--wide{aspect-ratio:21/9;margin:var(--space-5) 0 var(--space-6)}

/* ---- service page right-hand content rail ---- */
.service-rail{display:grid;gap:var(--space-5);margin-top:var(--space-5)}
.media--rail{aspect-ratio:4/5}
.fact-block{
  background:#fff;border:1px solid var(--sheet-100);border-left:2px solid var(--navy-700);
  padding:var(--space-4);
}
.fact-block__head{
  font-size:var(--fs-300);letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel-700);font-family:var(--font-body);font-weight:600;
  margin-bottom:var(--space-2);
}
.fact-block__list{display:grid;gap:var(--space-2)}
.fact-block__list li{
  position:relative;padding-left:var(--space-3);font-size:var(--fs-400);color:var(--ink);
}
.fact-block__list li::before{
  content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--navy-500);
}
/* grid items must be allowed to shrink, otherwise the horizontal rail below
   widens the whole column and the page scrolls sideways on a phone */
.service-layout>*{min-width:0}
.service-rail{min-width:0;max-width:100%}
/* Fotografije u desnoj traci imaju aspect-ratio 4/5. Bez izričite kolone od
   nula do 1fr, implicitna "auto" kolona uzima najveću sopstvenu širinu slike
   i traka se između 1020 i 1120 px probija van kontejnera. */
.service-rail{grid-template-columns:minmax(0,1fr)}
.service-rail>*{min-width:0;max-width:100%}
@media (max-width:1019px){
  /* rail collapses: photos become a horizontal scroll-snap strip */
  .service-rail{
    grid-auto-flow:column;grid-auto-columns:72%;
    overflow-x:auto;scroll-snap-type:x mandatory;
    gap:var(--space-3);padding-bottom:var(--space-3);
    -webkit-overflow-scrolling:touch;
  }
  .service-rail>*{scroll-snap-align:start}
  /* strip items sit off-screen horizontally, so they would only fade in when
     swiped — show them right away in the collapsed layout */
  html.js .service-rail [data-reveal],html.js .service-rail[data-reveal]{opacity:1;transform:none}
  .service-rail .fact-block{min-width:0}
}
@media (max-width:639px){
  .service-rail{grid-auto-columns:82%}
}

/* interne veze u tekstu (SEO) */
.service-crosslinks{
  margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:1px solid var(--sheet-100);
  color:var(--steel-700);font-size:var(--fs-400);line-height:1.6;
}
.service-crosslinks a{color:var(--navy-700);font-weight:500}
.refs-entry__services{
  margin-top:var(--space-3);font-size:var(--fs-300);color:var(--steel-700);
}
.refs-entry__services span{font-weight:600;color:var(--ink)}
.refs-entry__services a{color:var(--navy-700);text-decoration:none}
.refs-entry__services a:hover{text-decoration:underline}

/* uvodna animacija hero naslova — čist CSS, bez JavaScripta pre prvog prikaza.
   Klasu .hero-intro postavlja js/hero-slider.js samo kada su skripte stigle
   brzo; bez nje se naslov jednostavno prikaže. */
.hero-intro .hero__copy[data-slide-copy="0"] .word__inner{
  transform:translateY(110%);
  animation:hero-word-in var(--dur-3) var(--ease-out) forwards;
}
.hero-intro .hero__copy[data-slide-copy="0"] .word:nth-child(1) .word__inner{animation-delay:.10s}
.hero-intro .hero__copy[data-slide-copy="0"] .word:nth-child(2) .word__inner{animation-delay:.16s}
.hero-intro .hero__copy[data-slide-copy="0"] .word:nth-child(3) .word__inner{animation-delay:.22s}
.hero-intro .hero__copy[data-slide-copy="0"] .word:nth-child(4) .word__inner{animation-delay:.28s}
.hero-intro .hero__copy[data-slide-copy="0"] .word:nth-child(5) .word__inner{animation-delay:.34s}
.hero-intro .hero__copy[data-slide-copy="0"] .word:nth-child(6) .word__inner{animation-delay:.40s}
.hero-intro .hero__copy[data-slide-copy="0"] .word:nth-child(n+7) .word__inner{animation-delay:.46s}
@keyframes hero-word-in{to{transform:translateY(0)}}
.hero-intro .hero__progress .hero__seg{animation:hero-tick-in var(--dur-2) var(--ease-out) backwards}
.hero-intro .hero__seg:nth-child(2){animation-delay:.08s}
.hero-intro .hero__seg:nth-child(3){animation-delay:.16s}
@keyframes hero-tick-in{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){
  .hero-intro .hero__copy .word__inner,.hero-intro .hero__progress .hero__seg{animation:none;transform:none}
}

/* ===================== runda 3: fotografije iz prezentacije ===================== */

/* fotografija u kartici na traci referenci (početna strana) */
.ref-card__media{margin:calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0}
/* height:auto je obavezan — bez njega ostaje visina iz height="" atributa slike */
.ref-card__media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.ref-card__body{display:grid;gap:var(--space-2);align-content:start}

/* koraci montaže na terenu (stranica Montaža) */
.onsite-steps{counter-reset:onsite;display:grid;gap:var(--space-3);margin-top:var(--space-3)}
.onsite-steps li{position:relative;padding-left:2.8rem;counter-increment:onsite;max-width:68ch}
.onsite-steps li::before{
  content:counter(onsite,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-400);color:var(--navy-500);
}
.onsite-steps b{display:block;font-weight:600;color:var(--ink)}

/* ---------------------------------------------------------------- lightbox --- */
body.lightbox-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:400;display:grid;place-items:center}
.lightbox[hidden]{display:none}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(6,20,35,.92);border:0;cursor:zoom-out}
.lightbox__frame{
  position:relative;z-index:1;display:grid;justify-items:center;gap:var(--space-3);
  width:min(1180px,94vw);max-height:92vh;padding:var(--space-5) 0;
  animation:lightbox-in var(--dur-1) var(--ease-out);
}
.lightbox--instant .lightbox__frame{animation:none}
@keyframes lightbox-in{from{opacity:0;transform:translateY(10px)}}
.lightbox__figure{margin:0;display:grid;gap:var(--space-2);justify-items:center;min-height:0}
.lightbox__img{
  display:block;max-width:min(1100px,92vw);max-height:72vh;width:auto;height:auto;
  object-fit:contain;background:var(--navy-700);
}
.lightbox__caption{
  color:rgba(255,255,255,.82);font-size:var(--fs-300);text-align:center;
  max-width:60ch;text-wrap:balance;
}
.lightbox__counter{
  color:rgba(255,255,255,.55);font-size:var(--fs-200);letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;
}
.lightbox__close,.lightbox__nav{
  position:absolute;display:grid;place-items:center;width:48px;height:48px;
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25);
  cursor:pointer;transition:background var(--dur-1) var(--ease-mech);
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.2)}
.lightbox__close{top:0;right:0}
.lightbox__close svg,.lightbox__nav svg{width:22px;height:22px}
.lightbox__nav{top:50%;transform:translateY(-50%)}
.lightbox__nav--prev{left:0}
.lightbox__nav--next{right:0}
@media (max-width:639px){
  .lightbox__nav{top:auto;bottom:0;transform:none}
  .lightbox__img{max-height:60vh}
}

/* ------------------------------------------------------------ klijenti --- */
.client-strip{
  padding:var(--space-6) 0;background:var(--sheet-50,#fff);border-top:1px solid var(--sheet-100);
  /* traka je daleko ispod prvog ekrana — raspored se računa tek kada joj se
     približimo, a dok je van ekrana i animacija miruje */
  content-visibility:auto;contain-intrinsic-size:auto 260px;
}
.client-strip__head{
  font-size:var(--fs-200);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel-700);margin-bottom:var(--space-4);
}
.client-strip__marquee{overflow:hidden}
.client-strip__track{
  display:inline-flex;gap:var(--space-5);white-space:nowrap;
  animation:marquee 60s linear infinite;
}
.client-strip__marquee:hover .client-strip__track{animation-play-state:paused}
/* Imena stoje u dva ista niza da bi traka mogla da klizi u krug (-50%).
   display:contents znači da su pojedinačna imena flex-stavke, a ne ta dva niza. */
.client-strip__set{display:contents}
.client-strip__item{
  font-family:var(--font-display);font-weight:500;font-size:1.6rem;line-height:1.1;
  color:var(--steel-700);letter-spacing:.02em;position:relative;padding-right:var(--space-5);
}
.client-strip__item::after{
  content:"";position:absolute;right:calc(var(--space-5) / 2);top:50%;
  width:4px;height:4px;background:var(--steel-400);
}
.client-strip__note{margin-top:var(--space-4);font-size:var(--fs-300);color:var(--steel-700)}
@media (max-width:819px){
  /* na telefonu traka ne klizi — imena se jednostavno prelome u listu, pa se
     drugi (dupli) niz sklanja i poštuje se margina stranice */
  .client-strip__marquee{overflow:hidden;padding-inline:1rem}
  .client-strip__set--dup{display:none}
  .client-strip__track{display:flex;flex-wrap:wrap;white-space:normal;animation:none;gap:var(--space-3)}
  .client-strip__item{font-size:1.25rem;padding-right:var(--space-3)}
  .client-strip__item::after{right:calc(var(--space-3) / 2)}
}
@media (prefers-reduced-motion:reduce){
  .client-strip__track{animation:none;flex-wrap:wrap;white-space:normal}
}

/* --------------------------------------------------- vizija i misija --- */
.values{padding:var(--space-6) 0}
.values__grid{display:grid;gap:var(--space-4)}
@media (min-width:900px){
  .values__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5);align-items:start}
}
.value-card{border-top:2px solid var(--navy-700);padding-top:var(--space-3)}
.value-card h3{
  font-size:var(--fs-200);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel-700);margin-bottom:var(--space-2);
}
.value-card p{font-size:var(--fs-500);line-height:1.35;text-wrap:balance}
.values__media{margin-top:var(--space-5)}
.media--values{aspect-ratio:16/9}
@media (min-width:900px){.media--values{aspect-ratio:21/9}}
.refs-intro{max-width:68ch;margin-bottom:var(--space-5);color:var(--steel-700)}

/* ------------------------------------------------------ tim i saradnici --- */
.team{padding-bottom:var(--space-6)}
.team__lead{font-size:var(--fs-500);line-height:1.4;max-width:56ch;text-wrap:balance}
.associates{display:grid;gap:var(--space-3);margin-top:var(--space-5)}
@media (min-width:760px){.associates{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}}
.associate{border-top:1px solid var(--sheet-100);padding-top:var(--space-3)}
.associate__name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-500)}
.associate__line{font-size:var(--fs-300);color:var(--steel-700);margin-top:.2em}

/* =====================================================================
   RUNDA 4 — tehnički crtež: jedan sistem oznaka, linija i registarskih
   uglova preko svih 42 stranice. Bez senki, bez novih boja, bez zaobljenja.
   ===================================================================== */

/* ------------------------------------------------------- pomoćne klase --- */
.nowrap{white-space:nowrap}
.mono{font-family:var(--font-mono);font-weight:400}
/* svaki broj na sajtu stoji u tabelarnim ciframa */
.mono,.spec-row,.ref-card__year,.ref-card__date,.refs-entry__date,.refs-entry__rail span,
.hero__counter,.spec-table dd,.footer-block__value,.contact-details__list dd,
.preloader__count,.chip[data-filter="year"],.site-footer__address,.partner-card__country{
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------- registarski uglovi na foto --- */
/* jedan element, osam hairline poteza — po dva na svakom uglu */
.corner-marks{position:relative;--mark:var(--navy-500)}
.corner-marks::after{
  content:"";position:absolute;inset:8px;z-index:3;pointer-events:none;
  background:
    linear-gradient(var(--mark),var(--mark)) 0 0/12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 100% 0/12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 100% 0/1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 0 100%/12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 0 100%/1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 100% 100%/12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 100% 100%/1px 12px no-repeat;
  transition:opacity var(--dur-2) var(--ease-mech);
}
/* preko tamnih fotografija navy se ne vidi — isti crtež, bela olovka */
.corner-marks--light{--mark:rgba(255,255,255,.85)}
.corner-marks--hover::after{opacity:0}
.ref-card:hover .corner-marks--hover::after,
.ref-card:focus-within .corner-marks--hover::after{opacity:1}
@media (hover:none),(pointer:coarse){.corner-marks--hover::after{opacity:1}}

/* --------------------------------------------------- traka sa oznakom --- */
/* zaglavlje svake sekcije: hairline, levo indeks i naziv, desno dopuna */
.spec-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  border-top:1px solid var(--steel-400);
  padding-top:var(--space-2);margin-bottom:var(--space-3);
  font-family:var(--font-mono);font-weight:400;font-size:.75rem;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel-700);
  max-width:none;
}
.spec-row__meta{color:var(--steel-700);text-align:right}
/* na tamnim podlogama ista traka ide u srebrno */
.prefooter-cta .spec-row,.drewmax-band .spec-row,.notfound .spec-row,
.partners-drewmax__aside .spec-row,.service-sidebar__contact .spec-row{
  border-top-color:rgba(255,255,255,.3);color:var(--steel-400);
}
.prefooter-cta .spec-row__meta,.drewmax-band .spec-row__meta,
.notfound .spec-row__meta{color:var(--steel-400)}
/* RUNDA 6 — strana sa zahvalnicom: ista tamna traka kao 404, ali sa oznakom
   sekcije i manjim pečatom, da „OK" ne guta ceo ekran. */
.notfound--done .spec-row{margin-bottom:var(--space-4);max-width:none}
.notfound--done .notfound__code{font-size:clamp(4rem,14vw,10rem)}
.notfound--done .notfound__text a{color:#fff}
/* na uskom ekranu desna oznaka pada u red ispod leve */
@media (max-width:639px){
  .spec-row{flex-wrap:wrap;gap:var(--space-1)}
  .spec-row__meta{text-align:left;flex-basis:100%}
}

/* --------------------------------------------------------- kotna linija --- */
/* razdelnik sekcija: hairline sa zavrsecima od 6 px */
.dim-line{
  position:relative;height:1px;background:var(--steel-400);
  margin:var(--space-7) 0;border:0;
}
.dim-line::before,.dim-line::after{
  content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--steel-400);
}
.dim-line::before{left:0}
.dim-line::after{right:0}

/* ------------------------------------------------- mreža nacrtnog lista --- */
.home-intro,.home-services,.home-refs,.client-strip,.industries-band,.process,
.about-body,.about-highlights,.values,.team,.about-industries,
.services-list,.services-why,.refs-page,.partners-drewmax,.partners-others,
.contact-page,.privacy-page,.service-layout{position:relative;isolation:isolate}
.home-intro::before,.home-services::before,.home-refs::before,.client-strip::before,
.industries-band::before,.process::before,.about-body::before,.about-highlights::before,
.values::before,.team::before,.about-industries::before,.services-list::before,
.services-why::before,.refs-page::before,.partners-drewmax::before,.partners-others::before,
.contact-page::before,.privacy-page::before,.service-layout::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:8px 8px,8px 8px,64px 64px,64px 64px;
  background-attachment:scroll;
}

/* ---------------------------------------------- zaglavlje u jednom redu --- */
.section-head--split{display:grid;gap:var(--space-4)}
@media (min-width:640px){
  .section-head--split{
    grid-template-columns:minmax(0,1fr) auto;align-items:end;
  }
  .section-head--split .home-refs__controls{justify-self:end}
}

/* ------------------------------------------- kartica reference (traka) --- */
.ref-card__media{overflow:hidden}
.ref-card__media img{transition:transform var(--dur-3) var(--ease-mech)}
.ref-card:hover .ref-card__media img{transform:scale(1.03)}
.ref-card__year{
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-200);
  color:var(--navy-500);letter-spacing:.08em;font-variant-numeric:tabular-nums;
  border:1px solid var(--navy-500);padding:.15em .6em;justify-self:start;
  border-radius:var(--radius);
}
.ref-card__tag{
  margin-top:var(--space-2);padding-top:var(--space-2);
  border-top:1px solid var(--sheet-100);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;line-height:1.5;
  text-transform:uppercase;color:var(--navy-500);
}
.home-refs__track .ref-card{display:flex;flex-direction:column;gap:0}
.home-refs__track .ref-card__body{flex:1;padding-top:var(--space-3)}
.home-refs__track .ref-card__tag{margin-top:auto}

/* --------------------------------------------- traka klijenata: boje --- */
.client-strip__item{color:var(--navy-900)}
.client-strip__item::after{background:var(--navy-500)}

/* ------------------------------------------ mobilno zaglavlje i meni --- */
/* Dugme menija ide skroz desno. margin-left:auto unutar istog kontejnera
   daje istu marginu kao logo sa leve strane — bez ručnog merenja. */
@media (max-width:1100px){
  .site-header__aside{margin-left:auto}
}
.menu-toggle{flex-shrink:0}

/* red "Usluge": tekst je veza, strelica otvara spisak */
.mobile-menu__row{display:flex;align-items:center;gap:var(--space-3)}
.mobile-menu__row>a{flex:1}
.mobile-menu__toggle{
  width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;
  color:#fff;border:1px solid rgba(255,255,255,.3);
  transition:transform var(--dur-2) var(--ease-mech),background var(--dur-1);
}
.mobile-menu__toggle svg{width:22px;height:22px}
.mobile-menu__toggle[aria-expanded="true"]{transform:rotate(180deg);background:rgba(255,255,255,.1)}
.mobile-menu__subwrap{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-2) var(--ease-mech);
}
.mobile-menu__sublist{
  overflow:hidden;min-height:0;
  visibility:hidden;transition:visibility 0s linear var(--dur-2);
}
.mobile-menu__subwrap.is-open{grid-template-rows:1fr}
.mobile-menu__subwrap.is-open .mobile-menu__sublist{visibility:visible;transition-delay:0s}
.mobile-menu__sub a{padding-left:16px}
.mobile-menu__sub a:active,.mobile-menu__sub a:focus-visible{color:#fff}
/* kratak meni na niskom ekranu i dalje mora da se skroluje do dna */
.mobile-menu__foot{margin-top:var(--space-4)}

/* ------------------------------------ traka sa oznakom: crtež sekcije --- */
/* Traka je istovremeno i hairline sekcije, pa naslovi više ne crtaju svoju
   liniju — inače bi svaka sekcija imala dve linije na 1 cm razmaka. */
.section-head h2::before,.service-section h2::before,.service-scope h2::before,
.service-related h2::before,.service-drewmax h2::before{display:none}
.section-head h2,.service-section h2,.service-scope h2,.service-related h2{padding-top:0}

.spec-head{margin-bottom:var(--space-5)}
.spec-row{position:relative;border-top:0;padding-top:var(--space-2)}
.spec-row::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:var(--steel-400);transform-origin:left center;
}
/* krajevi linije: nitni krstići na ivicama kontejnera (samo na širem ekranu) */
.spec-row::after{
  content:"";position:absolute;top:-5px;left:0;right:0;height:11px;pointer-events:none;
  opacity:.4;
  background:
    linear-gradient(var(--steel-400),var(--steel-400)) 0 0/1px 11px no-repeat,
    linear-gradient(var(--steel-400),var(--steel-400)) 100% 0/1px 11px no-repeat;
}
@media (max-width:819px){
  .spec-row::after{top:0;height:7px}
}
.prefooter-cta .spec-row::before,.drewmax-band .spec-row::before,
.notfound .spec-row::before{background:rgba(255,255,255,.3)}
.prefooter-cta .spec-row::after,.drewmax-band .spec-row::after,
.notfound .spec-row::after{
  background:
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 0 0/1px 11px no-repeat,
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 100% 0/1px 11px no-repeat;
}
/* uvodna animacija: linija se iscrtava sleva, isti obrazac kao ranije */
html.js [data-reveal] .spec-row::before{transform:scaleX(0)}
html.js [data-reveal].is-revealed .spec-row::before{
  transform:scaleX(1);transition:transform var(--dur-3) var(--ease-mech) 120ms;
}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal] .spec-row::before{transform:scaleX(1)}
}
/* oznaka unutar članka usluge nema svoj kontejner */
.service-section .spec-row,.service-scope .spec-row,.service-related .spec-row{margin-bottom:var(--space-3)}
.prefooter-cta .spec-head,.drewmax-band .spec-head{position:relative;z-index:5}

/* ------------------------------------------------ merač skrola (gore) --- */
.scroll-gauge{
  position:fixed;top:0;left:0;right:0;height:1px;z-index:110;pointer-events:none;
  background:transparent;
}
.scroll-gauge i{
  display:block;height:100%;background:var(--navy-500);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 120ms linear;
}
@media (prefers-reduced-motion:reduce){.scroll-gauge i{transition:none}}

/* --------------------------------------- podnožje kao zaglavlje crteža --- */
.footer-block{
  display:grid;border-top:1px solid rgba(255,255,255,.12);
  grid-template-columns:1fr;
}
@media (min-width:600px){.footer-block{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.footer-block{grid-template-columns:repeat(3,1fr)}}
.footer-block__cell{
  padding:var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  display:grid;gap:2px;align-content:start;min-width:0;
}
@media (min-width:600px){
  .footer-block__cell{border-right:1px solid rgba(255,255,255,.12);padding-left:var(--space-4)}
  .footer-block__cell:nth-child(2n){border-right:0}
  .footer-block__cell:first-child{padding-left:0}
}
@media (min-width:1020px){
  .footer-block__cell:nth-child(2n){border-right:1px solid rgba(255,255,255,.12)}
  .footer-block__cell:nth-child(3n){border-right:0}
  .footer-block__cell:nth-child(3n+1){padding-left:0}
}
.footer-block__label{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-400);
}
.footer-block__value{
  font-size:var(--fs-300);color:#fff;line-height:1.5;
  overflow-wrap:anywhere;
}
.footer-block__value a{color:#fff}
.site-footer__bottom-inner{font-family:var(--font-body)}
.site-footer__bottom-inner .lang-switch{margin-left:auto}

/* Brojač preloadera je opisan u bloku „preloader" iznad (runda 6). */

/* ------------------------------------------------- asistent: oznaka --- */
.assistant__spec{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-400);
  border-top:1px solid rgba(255,255,255,.25);padding-top:var(--space-1);
  margin-bottom:var(--space-2);
}
.assistant__chips .chip{border-radius:0}
.assistant__msg--notice{font-family:var(--font-mono);letter-spacing:.04em}

/* ------------------------------------------- registarski uglovi svuda --- */
/* PAŽNJA: .inner-hero__media i .prefooter-cta__media NE smeju ući u ovaj spisak.
   Oni su position:absolute (fotografija iza sadržaja); kada su bili ovde,
   relative ih je vraćao u tok, pa je baner ostajao bez slike, a CTA traka je
   dobijala fotografiju iznad teksta u punoj visini. Registarski uglovi na te
   dve sekcije ionako idu na .inner-hero__grid i .prefooter-cta__inner. */
.media>picture,.hero__content,
.refs-entry__thumb,.refs-entry__shot,.lightbox__figure{position:relative}
.media,.inner-hero,.prefooter-cta,.refs-entry__thumb,.refs-entry__shot{position:relative}

/* --------------------------------------------------- ostale sitnice --- */
.refs-filters__count{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel-700);
  grid-column:1/-1;margin-top:var(--space-1);font-variant-numeric:tabular-nums;
}
.refs-filters__label{
  font-family:var(--font-mono);font-weight:400;font-size:.72rem;letter-spacing:.1em;
}
.refs-entry__date,.ref-card__date{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.refs-entry__rail span{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-300);letter-spacing:.08em}
.hero__counter{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-400);letter-spacing:.24em}
.contact-details__list dt{
  font-family:var(--font-mono);font-weight:400;font-size:.72rem;letter-spacing:.1em;
}
.site-footer__head{
  font-family:var(--font-mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;
  color:var(--steel-400);
}
.fact-block__head{
  font-family:var(--font-mono);font-weight:400;font-size:.72rem;letter-spacing:.12em;
  color:var(--steel-700);
}
.partner-card__country,.value-card h3,.home-intro__since,.drewmax-band__eyebrow,
.client-strip__head{
  font-family:var(--font-mono);font-weight:400;letter-spacing:.12em;
}
.partner-card__country,.value-card h3,.client-strip__head{font-size:.72rem;color:var(--steel-700)}
.drewmax-band__eyebrow{font-size:.72rem;color:var(--steel-400)}
.home-intro__since{font-size:.72rem;color:var(--steel-700)}
.prefooter-cta__phone,.service-sidebar__phone{font-family:var(--font-mono);font-weight:500;letter-spacing:.02em}
.process__num{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-400);letter-spacing:.1em}
.onsite-steps li::before{font-family:var(--font-mono);font-weight:500}
.lightbox__counter{font-family:var(--font-mono);font-weight:400;letter-spacing:.14em}
.notfound__code{font-variant-numeric:tabular-nums}
.chip{border-radius:0}
.chip[data-filter="year"]{font-family:var(--font-mono);letter-spacing:.06em}

/* strelica u padajućem polju forme */
.field select{
  -webkit-appearance:none;appearance:none;
  padding-right:2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9.5 12 16l7-6.5' fill='none' stroke='%2308406F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .25rem center;background-size:18px 18px;
}

/* ------------------------- registarski uglovi: gde se tačno pojavljuju --- */
/* Isti crtež, jedna deklaracija; menja se samo boja olovke i domaćin. */
.media>picture::after,
.inner-hero__grid::after,
.hero__content::after,
.prefooter-cta__inner::before,
.refs-entry__thumb::after,
.refs-entry__shot::after{
  content:"";position:absolute;pointer-events:none;z-index:3;
  background:
    linear-gradient(var(--mark),var(--mark)) 0 0/12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 100% 0/12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 100% 0/1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 0 100%/12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 0 100%/1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 100% 100%/12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 100% 100%/1px 12px no-repeat;
}
.media>picture::after,.refs-entry__thumb::after,.refs-entry__shot::after{inset:8px;--mark:var(--navy-500)}
.inner-hero__grid::after{inset:16px;--mark:rgba(255,255,255,.8)}
.hero__content::after{inset:calc(var(--header-h) + var(--space-3)) 0 var(--space-5);--mark:rgba(255,255,255,.85)}
.prefooter-cta__inner::before{inset:0;--mark:rgba(255,255,255,.55)}
/* preko tamnih fotografija (DREWMAX duotone) navy se gubi */
.media--drewmax>picture::after{--mark:rgba(255,255,255,.8)}
.lightbox__frame-mark{display:block;position:relative;min-height:0}
.lightbox__frame-mark::after{inset:6px}
@media (max-width:639px){
  .hero__content::after,.inner-hero__grid::after{display:none}
}

/* razmak u donjem redu podnožja i separator između dva broja telefona */
.site-footer__bottom-inner{padding:var(--space-3) 0}
.footer-block__sep{color:var(--steel-400);padding:0 .3em}

/* -------------------------------------------------- disciplina pokreta --- */
/* Ambijentalne petlje (marquee, Ken Burns, tačkice asistenta) imaju svoje
   trajanje; svaki prelaz i svaki ulazak koriste skalu tokena. */
@media (max-width:819px){
  .marquee__track{animation-duration:45s}
  .client-strip__track{animation-duration:45s}
}

/* kartica partnera: ista gornja linija koja se iscrtava kao na referencama */
.partner-card{position:relative;border-top:1px solid var(--sheet-100)}
.partner-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--navy-700);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-2) var(--ease-mech);
}
.partner-card:hover::before,.partner-card:focus-within::before{transform:scaleX(1)}
@media (hover:none),(pointer:coarse){.partner-card::before{transform:scaleX(1)}}

/* ------------------------------------------- smanjeni pokret: provera --- */
@media (prefers-reduced-motion:reduce){
  .scroll-gauge i{transition:none}
  .corner-marks::after,.ref-card__media img,.partner-card::before,.ref-card::before{transition:none}
  .mobile-menu__subwrap{transition:none}
}

/* --------------------------------------------- veze u tekstu (§6.10) --- */
/* Prosta veza u pasusu: navy-700 bez podvlake u miru, podvlaka od 1 px koja
   se iscrtava sleva na prelaz. Veze sa klasom (dugmad, .text-link, kartice)
   imaju svoj izgled i ovde se ne diraju. */
/* Podvlaka u miru ostaje — bledo siva — jer boja sama ne razlikuje vezu od
   teksta dovoljno (navy-700 prema mastilu je 1,7:1). Navy linija se preko nje
   iscrtava sleva na prelaz. */
main p a:not([class]),main li a:not([class]),.site-footer__address a{
  position:relative;color:var(--navy-700);font-weight:500;
  text-decoration:underline;text-decoration-color:var(--steel-400);
  text-decoration-thickness:1px;text-underline-offset:3px;
}
main p a:not([class])::after,main li a:not([class])::after,.site-footer__address a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-2) var(--ease-mech);
}
main p a:not([class]):hover::after,main p a:not([class]):focus-visible::after,
main li a:not([class]):hover::after,main li a:not([class]):focus-visible::after,
.site-footer__address a:hover::after,.site-footer__address a:focus-visible::after{transform:scaleX(1)}
.site-footer__address a{color:rgba(255,255,255,.8);text-decoration-color:rgba(255,255,255,.45)}
.site-footer__address a:hover{color:#fff}
@media (prefers-reduced-motion:reduce){
  main p a:not([class])::after,main li a:not([class])::after,.site-footer__address a::after{transition:none}
}

/* =========================== runda 5: stranica Usluge =========================== */
/* Šest jednakih "spec kartica" — svaka sa fotografijom, indeksom, sažetkom,
   obimom od tačno tri stavke i podnožjem. Bez senki, bez zaobljenja. */

/* ---------------------------------------------------------------- uvod --- */
.services-intro{padding:var(--space-7) 0;background:var(--sheet-050)}
.services-intro__grid{display:grid;gap:var(--space-5)}
@media (min-width:900px){
  .services-intro__grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--space-6);align-items:start}
}
.services-intro__text h2{font-size:var(--fs-700);color:var(--navy-900)}
.services-intro__text p{margin-top:var(--space-3);max-width:64ch}

/* ------------------------------------------------------------- katalog --- */
.services-catalog{padding:var(--space-7) 0}
.service-cards{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr);margin-top:var(--space-5)}
@media (min-width:720px){.service-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.service-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.service-card{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--sheet-000);border:1px solid var(--sheet-100);
}
/* linija se iscrtava po vrhu kartice na prelaz mišem */
.service-card::before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;z-index:4;
  background:var(--navy-700);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-2) var(--ease-mech);
}
.service-card:hover::before,.service-card:focus-within::before{transform:scaleX(1)}
.service-card__media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--sheet-100)}
.service-card__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-3) var(--ease-mech);
}
.service-card:hover .service-card__media img{transform:scale(1.03)}
/* indeks kataloga preko fotografije — pun navy blok, bez senke */
.service-card__index{
  position:absolute;left:0;top:0;z-index:4;
  background:var(--navy-900);color:#fff;padding:.35em .7em;
  font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
}
.service-card__body{display:flex;flex-direction:column;flex:1;padding:var(--space-4)}
.service-card__title{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-600);
  line-height:1.1;color:var(--navy-900);
}
/* specifičnost mora da nadjača pravilo za veze u tekstu (main li a:not([class])),
   inače naslov kartice dobija podvlaku iz proznog stila */
.service-card .service-card__title a{color:inherit;text-decoration:none}
.service-card .service-card__title a::after{content:"";position:absolute;inset:0;z-index:3}
.service-card .service-card__title a:hover{color:var(--navy-700)}
.service-card__summary{color:var(--steel-700);font-size:var(--fs-300);margin-top:var(--space-2)}
.service-card__rule{border:0;border-top:1px solid var(--sheet-100);margin:var(--space-3) 0}
.service-card__scope{display:grid;gap:6px}
.service-card__scope li{
  position:relative;padding-left:var(--space-3);
  font-size:var(--fs-300);line-height:1.45;color:var(--ink);
}
.service-card__scope li::before{
  content:"";position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--navy-500);
}
.service-card__foot{
  margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);
}
.service-card__more{font-weight:500;color:var(--navy-700);font-size:var(--fs-300)}
.service-card:hover .service-card__more{text-decoration:underline;text-underline-offset:3px}
.service-card__refs{
  position:relative;z-index:5;flex-shrink:0;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy-500);text-decoration:none;border-bottom:1px solid var(--steel-400);
  font-variant-numeric:tabular-nums;
}
.service-card__refs:hover{color:var(--navy-700);border-bottom-color:var(--navy-700)}
.service-card__refs--none{color:var(--steel-700);border-bottom-color:transparent}

/* ---------------------------------------------------------- industrije --- */
.services-industries{padding:var(--space-7) 0;background:var(--sheet-050)}
.industries-table{
  display:grid;grid-template-columns:minmax(0,1fr);
  margin-top:var(--space-5);border-top:1px solid var(--steel-400);
}
/* subgrid poravnava natpis "Klijenti" u sve četiri kolone, ma koliko reda
   uzeo opis iznad njega; gde subgrid ne radi, ćelije ostaju obične */
@media (min-width:900px){
  .industries-table{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto 1fr auto auto}
  .industries-table__cell{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}
}
.industries-table__cell{padding:var(--space-3) 0 var(--space-4);border-bottom:1px solid var(--sheet-100)}
@media (min-width:900px){
  .industries-table__cell{padding:var(--space-3) var(--space-3) var(--space-2);border-bottom:0}
  .industries-table__cell:first-child{padding-left:0}
  .industries-table__cell+.industries-table__cell{border-left:1px solid var(--sheet-100)}
}
.industries-table__label{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--navy-500);
  font-variant-numeric:tabular-nums;
}
.industries-table__name{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-600);
  line-height:1.1;color:var(--navy-900);margin-top:var(--space-1);
}
.industries-table__line{color:var(--steel-700);font-size:var(--fs-300);margin-top:var(--space-2)}
.industries-table__caption{
  margin-top:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--sheet-100);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel-700);
}
.industries-table__clients{margin-top:var(--space-1);font-size:var(--fs-300);color:var(--ink)}
.industries-table__clients li{padding:.12em 0}
.industries-table__clients--empty{color:var(--steel-700)}

/* ------------------------------------------------------- DREWMAX traka --- */
/* ista građa kao CTA traka: fotografija apsolutno iza, preliv, sadržaj iznad */
.drewmax-strip{
  position:relative;overflow:hidden;background:var(--navy-900);color:#fff;
  padding:var(--space-7) 0;min-height:420px;
}
.drewmax-strip__media{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.drewmax-strip__media img{width:100%;height:100%;object-fit:cover;display:block}
.drewmax-strip::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(14,42,71,.94) 0%,rgba(14,42,71,.78) 55%,rgba(14,42,71,.6) 100%);
}
.drewmax-strip::before{
  content:"";position:absolute;inset:0;z-index:2;opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:64px 64px;
}
.drewmax-strip .spec-head{position:relative;z-index:5}
.drewmax-strip .spec-row{border-top-color:rgba(255,255,255,.3);color:var(--steel-400)}
.drewmax-strip .spec-row::before{background:rgba(255,255,255,.3)}
.drewmax-strip .spec-row::after{
  background:
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 0 0/1px 11px no-repeat,
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 100% 0/1px 11px no-repeat;
}
.drewmax-strip .spec-row__meta{color:var(--steel-400)}
.drewmax-strip__inner{position:relative;z-index:3;display:grid;gap:var(--space-3);justify-items:start}
.drewmax-strip__title{font-size:var(--fs-700);color:#fff}
.drewmax-strip__text{color:rgba(255,255,255,.85);max-width:58ch}
.drewmax-strip__territories ul{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.drewmax-strip__territories li{
  position:relative;padding-left:var(--space-3);color:rgba(255,255,255,.85);font-size:var(--fs-400);
}
.drewmax-strip__territories li::before{
  content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--navy-500);
}
.drewmax-strip__inner::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;--mark:rgba(255,255,255,.55);
  background:
    linear-gradient(var(--mark),var(--mark)) 0 0/12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 100% 0/12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 100% 0/1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 0 100%/12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 0 100%/1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 100% 100%/12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) 100% 100%/1px 12px no-repeat;
}
@media (prefers-reduced-motion:reduce){
  .service-card::before,.service-card__media img{transition:none}
}