/* ==========================================================================
   emeretech.com - servisne strane
   Vrednosti su preuzete 1:1 sa starog sajta (tema arma), bez Bootstrap-a,
   bez jQuery-ja, bez WP balasta.
   ========================================================================== */

:root {
  --main: #f0c70a;          /* zuta, --colorMain sa starog sajta */
  --main-dark: #ba9c0c;     /* darken(--main, 10%) - hover */
  --ink: #131e25;           /* naslovi i linkovi */
  --body: #6d7a82;          /* tekst */
  --dark: #16232c;          /* pozadina headera */
  --card-shadow: 0 1px 14px 1px rgba(0, 0, 0, .05);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: var(--body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; border: 0; }

a { color: var(--ink); text-decoration: none; transition: color .2s ease-in-out; }
a:hover { color: var(--main); }

/* body je 300, a "bolder" od 300 daje samo 400 - original ima pun bold,
   i strong je TAMAN (#131e25), ne nasledjena siva */
strong, b { font-weight: 700; color: var(--ink); }

:focus-visible { outline: 2px solid var(--main); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--main); color: var(--ink);
  padding: 12px 22px; font-weight: 500;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- container
   Iste tacke preloma kao stari sajt (Bootstrap 4 + tema: 1300 -> 1200px). */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 15px;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1300px) { .container { max-width: 1200px; } }

/* ---------------------------------------------------------------- header */
.site-header { background: var(--dark); }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  min-height: 60px;
  padding-block: 18px;
}

.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo img { width: 40px; height: 40px; flex: none; }
.logo__text {
  font-family: Anton, Impact, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .5px;
  color: var(--main);
  text-transform: uppercase;
}
.logo:hover .logo__text { color: #fff; }

/* dugme - stil .btn.btn-outline-maincolor sa starog sajta, na tamnoj podlozi */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 28px;
  border: 2px solid var(--main);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: .8px;
  white-space: nowrap;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out;
}
.btn:hover { background: var(--main-dark); border-color: var(--main-dark); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn__arrow {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s ease-in-out;
}
.btn:hover .btn__arrow { transform: translateX(-3px); }

/* Uski ekrani - logo i dugme moraju da stanu u jedan red. */
@media (max-width: 575.98px) {
  .site-header__inner { padding-block: 14px; gap: 10px 12px; }
  .logo { gap: 9px; }
  .logo img { width: 34px; height: 34px; }
  .logo__text { font-size: 24px; }
  .btn { padding: 9px 16px; font-size: 15px; letter-spacing: .4px; }
}
@media (max-width: 359.98px) {
  .logo__text { font-size: 20px; }
  .btn { padding: 8px 12px; font-size: 14px; }
}

/* ---------------------------------------------------------------- layout
   Sidebar levo, sadrzaj desno - isto na svim sirinama >= 992px.
   (Stari sajt je ispod 1200px okretao strane; to je bila greska teme.) */
.page-content > .container { padding-block: 60px; }
@media (min-width: 768px)  { .page-content > .container { padding-block: 80px; } }
@media (min-width: 1200px) { .page-content > .container { padding-block: 150px; } }

.layout { display: flex; flex-wrap: wrap; margin-inline: -15px; }
.layout > * { width: 100%; padding-inline: 15px; }

@media (min-width: 992px) {
  .layout__side { width: 33.3333%; }
  .layout__main { width: 66.6667%; }
}
@media (min-width: 1200px) {
  .layout__side { width: 25%; }
  .layout__main { width: 75%; }
}

/* Ispod 992px sidebar ide ISPOD sadrzaja, centriran - kao na starom sajtu. */
@media (max-width: 991.98px) {
  .layout__side { order: 2; margin: 60px auto 0; max-width: 410px; }
  .layout__main { order: 1; }
}

/* ---------------------------------------------------------------- servis */
.service__media { display: block; width: 100%; height: auto; }

.service__body {
  padding: 32px 40px 42px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
@media (max-width: 992px) { .service__body { padding: 30px; } }
@media (max-width: 767px) { .service__body { padding: 20px; } }

.service__title {
  position: relative;
  margin: 5px 0 18px;
  padding-bottom: 35px;
  font-family: Anton, Impact, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
  word-break: break-word;
}
/* Kruzna oznaka + tackasta linija ispod naslova - isto kao na starom sajtu
   (tamo su bili icomoon glif i niz tacaka; ovde SVG + isti niz tacaka). */
.service__title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2.6px;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%23f0c70a'%3E%3Cpath transform='translate(0,960) scale(1,-1)' d='M511.961-63.985c-282.286 0-511.961 229.675-511.961 511.977 0 282.317 229.675 511.992 511.961 511.992 282.333 0 512.039-229.675 512.039-511.992 0-282.302-229.69-511.977-512.039-511.977zM511.961 898.052c-248.146 0-450.029-201.898-450.029-450.060s201.883-450.045 450.029-450.045c248.193 0 450.107 201.898 450.107 450.045s-201.914 450.060-450.107 450.060zM648.521 439.833c0-75.394-61.119-136.514-136.514-136.514s-136.514 61.119-136.514 136.514c0 75.394 61.119 136.514 136.514 136.514s136.514-61.119 136.514-136.514z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.service__title::after {
  content: "....................................." / "";
  position: absolute;
  left: 23px;
  bottom: 4px;
  font-family: Anton, Impact, sans-serif;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 3.2px;
  color: var(--main);
  pointer-events: none;
}

.service__body p { margin: 0 0 16px; }
.service__body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- sidebar */
.service-nav ul { margin: 0; padding: 0; list-style: none; }

.service-nav li {
  margin-bottom: 10px;
  padding: 22px 22px 18px;
  background: #fff;
  box-shadow: var(--card-shadow);
  font-family: Anton, Impact, sans-serif;
  font-size: 18px;
}
.service-nav li:last-child { margin-bottom: 0; }

/* Ikona stoji u prvom redu teksta, prelom ide ispod nje - kao na starom sajtu. */
.service-nav a {
  display: block;
  padding: 11px 0 8px;
  line-height: 1.9;
  color: var(--ink);
}
.service-nav a:hover { color: var(--main); }

.service-nav__icon {
  width: 40px; height: 40px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  fill: var(--main);
}

.service-nav .is-current > a { color: var(--main); cursor: default; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  display: flex;
  align-items: center;
  min-height: 150px;
  background: var(--ink) url("/assets/img/footer-bg.jpg") center / cover no-repeat;
  text-align: center;
}
.site-footer__copy {
  margin: 0;
  font-family: Anton, Impact, sans-serif;
  /* h3 36px x .small (80%) = 28.8px - izmereno na originalu */
  font-size: 28.8px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
}
.site-footer__copy span { color: var(--main); }
.site-footer__copy a { color: #fff; }
.site-footer__copy a:hover { color: var(--main); }

@media (max-width: 480px) {
  .site-footer__copy { font-size: 18px; }
  .site-footer__copy a { display: inline-block; font-size: 16px; }
}

/* ==========================================================================
   POCETNA STRANA
   ========================================================================== */

/* ---------------------------------------------------------------- sekcije */
.s-dark { background: var(--ink); color: #fff; }
.s-light { background: #fff; color: var(--body); }

.heading {
  max-width: 85%;               /* .special-heading sa starog sajta */
  margin: 0 0 17px;
  font-family: Anton, Impact, sans-serif;
  font-size: 63px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 3px;
  text-transform: uppercase;
  word-break: break-word;
}
.s-dark .heading { color: #fff; }
.s-light .heading { color: var(--ink); }
.heading .accent { color: var(--main); }
.heading--center { margin-inline: auto; text-align: center; }
.heading--sm { max-width: none; font-size: 46px; letter-spacing: 2px; margin-bottom: 21px; }

/* Original drzi 63px do 480 pa naslovi seku van ekrana - ovde stepenasto,
   da na tabletu i mobilnom sve stane i ostane citko. */
@media (max-width: 1199.98px) { .heading { max-width: 100%; font-size: 52px; } .heading--sm { font-size: 40px; } }
@media (max-width: 767.98px)  { .heading { font-size: 43px; letter-spacing: 2px; } .heading--sm { font-size: 34px; } }
@media (max-width: 479.98px)  { .heading { font-size: 34px; letter-spacing: 1.5px; } .heading--sm { font-size: 30px; letter-spacing: 1.5px; } }

/* Zuti separator - ista maska kao na starom sajtu. */
.sep {
  width: 264px; height: 15px; margin: 22px 0 0;
  background: var(--main);
  -webkit-mask: url("/assets/img/separator.png") no-repeat left center;
  mask: url("/assets/img/separator.png") no-repeat left center;
}
.sep--center {
  width: 100%;
  -webkit-mask-image: url("/assets/img/separator-center.png");
  mask-image: url("/assets/img/separator-center.png");
  -webkit-mask-position: center;
  mask-position: center;
}

/* ---------------------------------------------------------------- hero
   Rekonstrukcija Rev Slider layouta. RS racuna visinu kao gh * pw / gw,
   pa visina PRATI sirinu (nema prazne pozadine ispod teksta na uzim
   ekranima): desktop 920/1260, tablet 850/1200, mobilni 720/767. */
.hero {
  height: min(920px, 73.02vw);
  background: var(--ink) url("/assets/img/hero.jpg") center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero__inner {
  width: 1260px;
  max-width: 100%;
  margin-inline: auto;
  /* 67px: tekst blok podjednako udaljen od vrha strane i Contact us dugmeta */
  padding: 96px 15px 0;
  text-align: center;
}
.hero__kicker {
  margin: 0 0 79px;
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-weight: 400;
  font-size: 50px;
  line-height: 22px;
  letter-spacing: 20px;
  text-indent: 20px;
  text-transform: uppercase;
}
.hero__title { margin: 0; font-family: Anton, Impact, sans-serif; font-weight: 400; text-transform: uppercase; }
.hero__l1, .hero__l2 {
  display: block;
  letter-spacing: 10px;
  text-indent: 10px;
}
/* RESPONSE izmedju EMERGENCY (50) i TECHNOLOGIES (220) po velicini */
.hero__l1 { font-size: 135px; line-height: 162px; }
.hero__l2 { font-size: 220px; line-height: 300px; margin-top: 35px; }

/* Dugme poravnato sa desnom ivicom kartica ispod (container content sirina),
   spusteno da stoji tik iznad kartica koje ulaze u hero. */
.hero__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
  width: 1110px;
  max-width: calc(100% - 30px);
  margin-inline: auto;
}
@media (min-width: 1300px) { .hero__actions { width: 1170px; } }
.btn--hero {
  gap: 0;                       /* razmak daje btn__angle margin-left 7px */
  padding: 11px 37px;
  background: #007aff;          /* plavi rs-layer (.slider1button) ispod zutog okvira */
  font-family: "Open Sans", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .8px;
}
.btn__angle { width: 10px; height: 17px; margin-left: 7px; fill: currentColor; }
/* Original hero dugme na hover: puna zuta (var(--colorMain)), ne tamnija nijansa. */
.btn--hero:hover { background: var(--main); border-color: var(--main); color: #fff; }

/* laptop/tablet tier slajdera: grid 1200, visina 850, TECHNOLOGIES 167.
   Dugme je na originalu vidljivo SAMO na desktop tieru (>=1240). */
@media (max-width: 1239.98px) and (min-width: 768px) {
  .hero { height: 70.833vw; }
  .hero__kicker { font-size: 4.17vw; letter-spacing: 1.67vw; text-indent: 1.67vw; margin-bottom: 6.58vw; line-height: 1.83vw; }
  .hero__inner { padding-top: 3vw; }
  .hero__l1 { font-size: 11.25vw; }
  .hero__l2 { font-size: 18.33vw; margin-top: 2.92vw; }
  .hero__l1, .hero__l2 { line-height: 1.2; letter-spacing: .83vw; text-indent: .83vw; }
  .hero__actions { display: none; }
}

/* mobilni tier: grid 720, visina prati sirinu, dugme skriveno (kao original) */
@media (max-width: 767.98px) {
  .hero { height: min(93.87vw, 720px); }
  .hero__inner { padding-top: 4vw; }
  /* EMERGENCY uz naslov: isti font (Anton) i velicina kao RESPONSE */
  .hero__kicker {
    font-family: Anton, Impact, sans-serif;
    font-size: 13.61vw;
    line-height: 1.17;
    letter-spacing: .56vw;
    text-indent: .56vw;
    margin-bottom: 0;
  }
  .hero__l1 { font-size: 13.61vw; margin-top: 1.67vw; }
  .hero__l2 { font-size: 11.53vw; margin-top: 1.67vw; }
  .hero__l1, .hero__l2 { line-height: 1.17; letter-spacing: .56vw; text-indent: .56vw; }
  .hero__actions { display: none; }
}

/* ------------------------------------------------------- kartice servisa */
.cards { display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Ispod 992: jedna uredna kolona (na originalu je tu isotope pravio haos). */
@media (max-width: 991.98px) {
  .cards--3 { grid-template-columns: minmax(0, 1fr); max-width: 500px; margin-inline: auto; }
}

/* Anatomija kartice preneta sa starog sajta:
   40 + ikona 60 + 31 + naslov (27/red) + 23 + tekst + 50 + link 17 + 32 = 328.
   Kartice u istom redu su iste visine, a tackasta linija + Learn More stoje
   na dnu - poravnato kroz ceo red. */
.card-service {
  display: flex;
  flex-direction: column;
  padding: 40px 40px 32px;
  background: #fff;
  box-shadow: var(--card-shadow);
  text-align: center;
  color: var(--ink);
}
.card-service__icon { display: block; height: 60px; margin: 0 0 31px; }
.card-service__icon svg { display: block; width: 60px; height: 60px; margin-inline: auto; fill: var(--ink); }
.card-service h2, .card-service h3 {
  margin: 0 0 23px;
  font-family: Anton, Impact, sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
}
/* Boje naslova po sekciji, kako je na starom sajtu:
   tamna sekcija: naslov ZUT, hover taman (.ds .icon-box .icon-styled + h4 a)
   svetla sekcija: naslov taman, hover BEZ promene (.service-isotope ... a:hover) */
.s-dark .card-service h2 a, .s-dark .card-service h3 a { color: var(--main); }
.s-dark .card-service h2 a:hover, .s-dark .card-service h3 a:hover { color: var(--ink); }
.s-light .card-service h2 a, .s-light .card-service h3 a,
.s-light .card-service h2 a:hover, .s-light .card-service h3 a:hover { color: var(--ink); }
/* "We offer" naslovi su capitalize (Title Case), ne uppercase - kao original */
.s-light .card-service h2, .s-light .card-service h3 { text-transform: capitalize; }
.card-service p { position: relative; flex: 1; margin: 0 0 25px; padding-bottom: 25px; color: var(--ink); }
/* Zuti kruzic + tackasta linija na dnu pasusa - .service-isotope .icon-box p::before/::after
   sa starog sajta (glif e919 + maska separator-events.png 44x2 koja se ponavlja). */
.card-service p::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-132px);
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%23f0c70a'%3E%3Cpath transform='translate(0,960) scale(1,-1)' d='M511.961-63.985c-282.286 0-511.961 229.675-511.961 511.977 0 282.317 229.675 511.992 511.961 511.992 282.333 0 512.039-229.675 512.039-511.992 0-282.302-229.69-511.977-512.039-511.977zM511.961 898.052c-248.146 0-450.029-201.898-450.029-450.060s201.883-450.045 450.029-450.045c248.193 0 450.107 201.898 450.107 450.045s-201.914 450.060-450.107 450.060zM648.521 439.833c0-75.394-61.119-136.514-136.514-136.514s-136.514 61.119-136.514 136.514c0 75.394 61.119 136.514 136.514 136.514s136.514-61.119 136.514-136.514z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.card-service p::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 19px;
  width: 260px;
  max-width: calc(100% - 38px);
  height: 2px;
  background: var(--main);
  -webkit-mask: url("/assets/img/separator-events.png") center center;
  mask: url("/assets/img/separator-events.png") center center;
}

.more {
  display: flex;                 /* block-level: bez line-box viska */
  width: max-content;
  margin-inline: auto;
  align-items: center;
  gap: 7px;
  height: 17px;
  line-height: 17px;
  font-size: 17px;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--ink);
}
/* Original ::after ima samo color tranziciju .15s - strelica se NE pomera. */
.more svg { width: 10px; height: 16px; fill: currentColor; }
.more { transition: color .15s ease-in-out; }
.more:hover { color: var(--main); }

/* Kartice ulaze u hero, kao na starom sajtu (-180px), red + 30 traga + 50 dna. */
.services-top > .container { padding: 50px 15px 80px; }
@media (min-width: 992px) { .services-top .cards { margin-top: -180px; } }

/* ---------------------------------------------------------------- about */
.about { position: relative; }
.about > .container { padding-block: 60px 40px; }
@media (min-width: 768px)  { .about > .container { padding-block: 80px 65px; } }
/* pb 195 kao original - visina sekcije odredjuje kadar slike (90%/81%/70%) */
@media (min-width: 1200px) { .about > .container { padding-block: 100px 195px; } }

/* Prepisano 1:1 sa starog sajta (.cover-image.s-cover-left, izmereno na zivom):
   >=1680: 62% x 90%, left -122px | 1441-1679: 65% x 81%, -145px |
   <=1440: 65% x 70%, -145px | <1200: div nestaje, prikazuje se slika u koloni.
   Sekcija sece visak (overflow hidden), bg je uvek cover 50% 50%. */
.about { overflow: hidden; }
.about__media {
  position: absolute;
  left: -122px; top: 0;
  width: 62%; height: 90%;
  z-index: 2;
  background: url("/assets/img/about-cover.jpg") 50% 50% / cover no-repeat;
}
@media (max-width: 1679.98px) { .about__media { width: 65%; height: 81%; left: -145px; } }
@media (max-width: 1440.98px) { .about__media { width: 65%; height: 70%; left: -145px; } }
@media (max-width: 1199.98px) {
  .about__media { display: none; }
  .about__spacer .about__ph { visibility: visible; }   /* slika u koloni, kao original */
}
/* Bootstrap geometrija: row -15, kolone padding 15 -> content 670 / 470 na xl.
   Nevidljivi img u prvoj koloni daje sekciji istu visinu kao na originalu. */
.about__grid { display: flex; flex-wrap: wrap; margin-inline: -15px; }
.about__spacer, .about__text { width: 100%; padding-inline: 15px; }
.about__text { position: relative; }
.about__ph { display: block; width: 100%; height: auto; visibility: hidden; }
@media (min-width: 992px) {
  .about__spacer { width: 50%; }
  .about__text { width: 50%; }
}
@media (min-width: 1200px) {
  .about__spacer { width: 58.333%; }
  .about__text { width: 41.667%; }
}
@media (max-width: 991.98px) {
  .about__spacer { margin-bottom: 30px; }
}
.about__text .heading { margin-top: 41px; }
.about__text .sep { margin-bottom: 57px; }
.about__text { padding-bottom: 65px; }
@media (max-width: 991.98px) {
  .about__text .heading { margin-top: 20px; }
  .about__text .sep { margin-bottom: 44px; }
  .about__text { padding-bottom: 40px; }
}
.about__text p { margin: 0 0 16px; }
/* .ds a:not(.btn): beli linkovi, hover zut - bez podvlacenja */
.about__text a { color: #fff; text-decoration: none; }
.about__text a:hover { color: var(--main); }

/* ------------------------------------------------- mine clearance services */
.mcs > .container { padding-block: 50px; }
@media (min-width: 768px) { .mcs > .container { padding-block: 70px 50px; } }
.mcs .sep { margin-bottom: 27px; }
.mcs > .container > p { margin: 0 0 16px; }
.mcs > .container > p:last-child { margin-bottom: 0; }
.mcs > .container > p.lead { margin-bottom: 50px; color: var(--ink); }

.acc-grid { display: grid; gap: 0 30px; margin-bottom: 60px; }
@media (min-width: 992px) { .acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.acc__item {
  margin-bottom: 15px;
}
.acc .acc__item:last-child { margin-bottom: 0; }
.acc__item {
  background: #fff;
  box-shadow: var(--card-shadow);
}
.acc__item summary {
  position: relative;
  padding: 36px 20px 21px 67px;
  font-family: Anton, Impact, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
  color: var(--ink);
  text-transform: capitalize;
  cursor: pointer;
  list-style: none;
}
.acc__item summary::-webkit-details-marker { display: none; }
/* Original hover: boja ostaje, opacity .7 ([role=tablist] .card-header a:hover) */
.acc__item summary { transition: opacity .2s ease-in-out; }
.acc__item summary:hover { opacity: .7; }
.acc__item summary::after {
  content: "";
  position: absolute;
  left: 19px; top: 39px;
  width: 11px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%23f0c70a'%3E%3Cpath d='M960 448h-384v-384h-128v384h-384v128h384v384h128v-384h384z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.acc__item[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' fill='%23f0c70a'%3E%3Cpath d='M64 448h896v128h-896z'/%3E%3C/svg%3E");
}
.acc__body { padding: 6px 61px 40px; color: var(--body); }

/* ---------------------------------------------------------------- we offer */
/* Zuta dijagonala u pozadini - service-home-1.jpg sa starog sajta
   (original je krije na mobilnom: hide-img-on-mobile). */
.offer { background: #fff url("/assets/img/offer-bg.jpg") center / cover no-repeat; }
@media (max-width: 767.98px) { .offer { background-image: none; } }
.offer > .container { padding-block: 60px 30px; }
@media (min-width: 768px)  { .offer > .container { padding-block: 70px 50px; } }
@media (min-width: 1200px) { .offer > .container { padding-block: 90px 125px; } }
.offer .sep { margin-bottom: 72px; }
@media (max-width: 991.98px) { .offer .sep { margin-bottom: 44px; } }
.offer .cards { margin-bottom: 30px; }   /* trag masonry reda kao na starom */

/* ---------------------------------------------------------------- galerija */
.gallery { background: var(--ink) url("/assets/img/footer-bg.jpg") center / cover no-repeat; }
.gallery > .container-wide { padding-block: 60px; }
@media (min-width: 768px)  { .gallery > .container-wide { padding-block: 70px 80px; } }
@media (min-width: 1200px) { .gallery > .container-wide { padding-block: 141px 150px; } }
.container-wide { width: 100%; padding-inline: 15px; margin-inline: auto; }
.gallery .sep { margin-bottom: 62px; }
@media (max-width: 991.98px) { .gallery .sep { margin-bottom: 44px; } }

/* Ponasanje wpaas slajdera sa starog sajta:
   - 8 slotova sirine (100% - 6x5px gap) / 7 -> vidljivo je 7, osmi je isecen
   - hover/fokus panel se otvara na 80%, ostali se stisnu
   - labela je NEVIDLJIVA dok se panel ne otvori (opacity 0 -> 1) */
.strip { display: flex; gap: 5px; height: 423px; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.strip__item {
  position: relative;
  flex: 0 0 auto;
  width: calc((100% - 30px) / 7);
  min-width: 0;
  overflow: hidden;
  transition: width .5s ease-in-out;
}
/* Otvaranje panela vodi JS (klase .engaged/.open) kao wpaas na originalu:
   panel ostaje otvoren dok je mis nad trakom, menja se na ulazak u drugi
   panel, resetuje na izlazak iz trake. JS upisuje --ow (prirodna sirina
   otvorene slike za visinu trake) pa se sirina GLATKO animira - slika se
   otkriva klizanjem, bez zuma, kao jQuery animacija na starom sajtu. */
.strip.engaged .strip__item { width: calc((100% - var(--ow, 535px) - 35px) / 7); }
.strip .strip__item.open { width: var(--ow, 535px); }
/* Slika po visini trake, prirodna sirina - zatvoren panel je levi isecak. */
.strip__item img { width: auto; height: 100%; max-width: none; display: block; }
.strip__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 15px;
  background: var(--main);
  color: var(--ink);
  font-family: "Roboto Condensed", Roboto, sans-serif;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
}
.strip__item.open .strip__label {
  opacity: 1;
  visibility: visible;
  white-space: normal;
}

@media (max-width: 991.98px) {
  .strip { flex-wrap: wrap; height: auto; gap: 10px; overflow: visible; }
  .strip__item,
  .strip.engaged .strip__item,
  .strip .strip__item.open { flex: 1 1 calc(50% - 5px); }
  .strip__item { height: 220px; }
  .strip__item img { width: 100%; object-fit: cover; }
  .strip__label { white-space: normal; font-size: 16px; padding: 12px; opacity: 1; visibility: visible; }
}
/* Ispod 576: horizontalna swipe traka sa tackicama, kao original na mobilnom
   (proporcija trake sa starog sajta: 570/1920 sirine, tri vidljiva panela). */
@media (max-width: 575.98px) {
  .strip {
    flex-wrap: nowrap;
    height: 36vw;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .strip::-webkit-scrollbar { display: none; }
  .strip__item,
  .strip.engaged .strip__item,
  .strip .strip__item.open {
    flex: 0 0 calc((100% - 10px) / 3);
    height: 36vw;
    scroll-snap-align: start;
  }
  .strip__item img { width: 100%; object-fit: cover; }
  .strip__label { display: none; }
  .gallery .strip-dots { display: flex; }
}

/* Tackice mobilne galerije - stil kao desktop paginacija */
.strip-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  height: 35px;
  margin-bottom: -35px;
  padding-top: 12px;
}
.strip-dots button {
  width: 10px; height: 10px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.strip-dots button.active { background: #fff; }

/* --------------------------------------------------------------- kancelarije */
.offices > .container { padding-block: 30px 40px; }
@media (min-width: 768px)  { .offices > .container { padding-block: 40px 60px; } }
@media (min-width: 1200px) { .offices > .container { padding-block: 110px 130px; } }

/* Bootstrap geometrija: tekst col-xl-5 (470), mapa col-xl-7 (670). */
.offices__grid { display: flex; flex-wrap: wrap; margin-inline: -15px; }
.offices__text, .offices__map { width: 100%; padding-inline: 15px; }
@media (min-width: 992px)  { .offices__text { width: 50%; }     .offices__map { width: 50%; } }
@media (min-width: 1200px) { .offices__text { width: 41.667%; } .offices__map { width: 58.333%; } }
@media (max-width: 991.98px) { .offices__map { margin-top: 30px; } }

.offices .sep { margin-bottom: 58px; }
@media (max-width: 991.98px) { .offices .sep { margin-bottom: 35px; } }

.offices__list { display: grid; gap: 13px 30px; }
@media (min-width: 768px) { .offices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.office h3 {
  margin: 0 0 23px;
  font-family: Anton, Impact, sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 1.5px;
  text-transform: capitalize;
  color: var(--ink);
}
.office ul { margin: 0 0 20px; padding: 0; list-style: none; }
.office li { display: flex; align-items: flex-start; margin-bottom: 10px; }
.office__ico { width: 16px; height: 16px; flex: none; margin: 4px 8px 0 0; fill: var(--main); }
.office p { margin: 0; }

.offices__map { align-self: start; }
.offices__map img { display: block; width: 100%; height: auto; }
@media (min-width: 992px) { .offices__map { margin-top: 130px; } }

/* ---------------------------------------------------------------- to top
   #toTop stil teme arma: 60x60 zuto, dole desno, hover bottom 3px + opacity 1.
   Pojavljivanje posle skrola: scroll-driven animacija (gde nema podrske,
   dugme je stalno vidljivo). */
.totop {
  position: fixed;
  right: 0; bottom: 0;
  width: 60px; height: 60px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--main);
  opacity: 0;
  transform: translateY(80px);
  pointer-events: none;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, bottom .2s linear;
}
.totop svg { width: 16px; height: 26px; fill: #fff; }
body.scrolled .totop { opacity: .7; transform: translateY(0); pointer-events: auto; }
body.scrolled .totop:hover { bottom: 3px; opacity: 1; }
/* bez JS (noscript i sl.): dugme stalno vidljivo */
body.no-js .totop { opacity: .7; transform: none; pointer-events: auto; }

@media print { .totop { display: none; } }

/* ---------------------------------------------------------------- print */
@media print {
  .site-header, .site-footer, .layout__side, .skip-link { display: none; }
  body { color: #000; }
  .service__body { box-shadow: none; padding: 0; }
}