/* ============================================================
   PRESTIGE GUARD : GHC linija (25.07.2026)
   Dizajn sistem po uzoru na grandhotelcentral.com:
   tanki uppercase serif naslovi, off-white baza, ogromni razmaci.
   Fontovi: Cormorant Garamond 300 (naslovi) + Raleway (body).
   ============================================================ */

/* Self-hosted fontovi (SEO krug 2, 11.08.2026): varijabilni woff2, latin subset,
   zamena za fonts.googleapis.com link. Ne vracati CDN link bez razloga. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f4f4f3;
  --bg-warm: #e9e9e4;
  --bg-card: #ffffff;
  --ink: #33312f;
  --ink-soft: #6b6862;
  --line: #d7d7d5;
  --bronze: #be8055;
  --bronze-dark: #a86c44;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Raleway', 'Segoe UI', Arial, sans-serif;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 62.5%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--sans);
  font-size: 1.6rem;
  line-height: 1.75;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* height: auto je obavezan cim slike dobiju width/height atribute, inace atribut pobedi aspect-ratio (vidi HANDOFF gotcha) */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* Jedinstven ton preko svih fotografija radi kohezije */
.tone { filter: sepia(0.08) saturate(0.88) contrast(1.03) brightness(1.01); }

.container { max-width: 144rem; margin: 0 auto; padding: 0 6rem; }
.container--narrow { max-width: 96rem; }

/* ---------- Tipografija ---------- */

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.08;
  /* Ravnomerno prelamanje redova, bez orphan reči (progressive enhancement) */
  text-wrap: balance;
}

.kicker {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--bronze-dark);
  display: block;
  margin-bottom: 2.4rem;
}

.t-hero  { font-size: clamp(3.8rem, 7vw, 7.6rem); }
.t-xl    { font-size: clamp(3.2rem, 5vw, 6.4rem); }
.t-lg    { font-size: clamp(2.6rem, 3.6vw, 4rem); }
.t-md    { font-size: clamp(2.2rem, 2.6vw, 3rem); }

/* Pasusi: bez jedne reči u poslednjem redu (Chrome 117+/Safari 18.2+, ostali ignorišu) */
p { text-wrap: pretty; }
/* Dugi serif statement pasusi: balance ih ignoriše (limit redova), pretty resava orphan */
p.serif { text-wrap: pretty; }
/* H3 (kartice, liste): pretty bolje resava dvoredne naslove od balance
   (povuce rec dole da poslednji red ne bude jedna rec) */
h3 { text-wrap: pretty; }

/* Kontakt naslov: par "Confidential Consultation" se vezuje samo tamo gde naslov ima punu
   sirinu reda (do 900px). Preko 901px naslov deli red sa kolonom forme, pa par MORA da sme
   da se prelomi, inace tekst ulazi preko forme. */
@media (max-width: 900px) {
  .nb-consult { white-space: nowrap; }
}
/* U dvokolonskom kontakt layoutu naslov ima samo pola sirine kontejnera, pa font prati
   sirinu kolone. Bez ovoga je na ~901px razmak do kolone forme bio svega 4px. */
@media (min-width: 901px) {
  .grid--2 .h-consult { font-size: min(6.4rem, calc(5.5vw - 1rem)); }
}

.lead { font-size: 1.8rem; line-height: 1.85; color: var(--ink-soft); }
.small { font-size: 1.3rem; color: var(--ink-soft); }

/* ---------- Dugmad ---------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 1.7rem 3.6rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.btn:hover { background: var(--ink); color: #fff; }

.btn--solid { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.btn--solid:hover { background: var(--bronze-dark); border-color: var(--bronze-dark); color: #fff; }

.btn--light { border-color: rgba(255,255,255,0.85); color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); }

.btn-row { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; }

.link-line {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--bronze);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.link-line:hover { color: var(--bronze-dark); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8.4rem;
}
.brand {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.5s var(--ease);
  white-space: nowrap;
}
.brand span { color: var(--bronze); }

/* Grb (lav u stitu) ispred imena, proba 12.08.
   PNG se koristi kao maska, pa grb uvek uzima boju teksta: beo preko hero-a,
   ink na svetloj traci i u otvorenom meniju. Jedan fajl za sva stanja. */
.brand { display: inline-flex; align-items: center; gap: 1.1rem; }
.brand-mark {
  flex: none;
  width: 3.1rem;
  height: 3.6rem;
  background-color: currentColor;
  -webkit-mask: url('img/logo-mark.png') no-repeat center / contain;
  mask: url('img/logo-mark.png') no-repeat center / contain;
  transition: background-color 0.5s var(--ease);
}
/* Telefoni: logo, slusalica i burger dele isti red (gotcha #17), pa grb ide manji.
   Ispod 340px nema vise nijedan piksel rezerve, tu se sklanja. Footer nema tu tesnocu. */
@media (max-width: 420px) {
  .site-header .brand-mark { width: 2.25rem; height: 2.6rem; }
  .site-header .brand { gap: 0.6rem; }
}
@media (max-width: 339px) {
  .site-header .brand-mark { display: none; }
}

.nav-desktop { display: flex; align-items: center; gap: 3.4rem; }
.nav-desktop a:not(.btn) {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.92);
  position: relative;
  padding: 0.6rem 0;
  transition: color 0.4s var(--ease);
}
.nav-desktop a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav-desktop a:not(.btn):hover::after,
.nav-desktop a.active::after { transform: scaleX(1); transform-origin: left; }

.header-phone {
  font-size: 1.2rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 600;
}

/* Social ikone u desktop navigaciji (fidbek 3: i gore, ne samo u footeru) */
.header-social { display: inline-flex; align-items: center; }
/* par ikona ide blize jedna drugoj nego sto je gap za tekstualne stavke */
.header-social + .header-social { margin-left: -1.9rem; }
.nav-desktop a.header-social::after { content: none; }
.header-social svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.header-social:hover { color: var(--bronze); }

/* Ikonica slusalice u sticky headeru, samo tamo gde je hamburger (fidbek 3, M1).
   Redosled u traci: logo, slusalica, burger. Slusalica nosi brend boju (bronza) da se
   ne takmici sa burgerom, i namerno je sitnija od njega. Dodirna zona ostaje 40x44. */
.header-actions { display: none; align-items: center; gap: 0.2rem; }
.header-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4.4rem;
  color: var(--bronze);
  z-index: 320;
  transition: color 0.4s var(--ease);
}
/* Ikonica je puna (solid) slusalica, ne linijska: boji se fill-om, ne stroke-om.
   Boju i dalje daje .header-call (bronza preko fotke, tamnija bronza na svetloj traci). */
.header-call svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
  stroke: none;
  display: block;
}
/* Preko svetle fotografije bronza sama nestaje, isti problem kao hero kicker.
   Senka se skida cim traka postane svetla. */
.header-call svg { filter: drop-shadow(0 1px 2px rgba(20, 18, 16, 0.5)); }
/* Na svetloj traci i u otvorenom meniju ide tamnija bronza (kontrast prema #f4f4f3) */
.site-header.scrolled .header-call,
.site-header.solid .header-call,
.nav-open .site-header .header-call { color: var(--bronze-dark); }
.site-header.scrolled .header-call svg,
.site-header.solid .header-call svg,
.nav-open .site-header .header-call svg { filter: none; }

/* Header posle skrola: svetla traka, taman tekst */
.site-header.scrolled { background: rgba(244,244,243,0.96); box-shadow: 0 1px 0 var(--line); }
.site-header.scrolled .brand { color: var(--ink); }
.site-header.scrolled .nav-desktop a:not(.btn) { color: var(--ink); }
.site-header.scrolled .nav-toggle span { background: var(--ink); }

/* Strane bez tamnog hero-a (contact): odmah taman header */
.site-header.solid { background: rgba(244,244,243,0.96); box-shadow: 0 1px 0 var(--line); }
.site-header.solid .brand { color: var(--ink); }
.site-header.solid .nav-desktop a:not(.btn) { color: var(--ink); }
.site-header.solid .nav-toggle span { background: var(--ink); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 4.4rem; height: 4.4rem;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  z-index: 320;
}
.nav-toggle span {
  display: block;
  width: 2.6rem; height: 1px;
  background: #fff;
  transition: transform 0.4s var(--ease), opacity 0.3s, background 0.4s;
}
/* Otvoren meni: ceo header iznad overlay-a da X ostane klikabilan */
.nav-open .site-header { z-index: 340; background: transparent; box-shadow: none; }
.nav-open .site-header .brand { color: var(--ink); }
.nav-open .site-header .nav-desktop { visibility: hidden; }
.nav-open .nav-toggle span { background: var(--ink) !important; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(0.8rem) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-0.8rem) rotate(-45deg); }

/* Mobilni meni: svetli full-screen, GHC duh */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 3rem 4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
  overflow-y: auto;
}
.nav-open .nav-mobile { opacity: 1; visibility: visible; }
.nav-mobile a {
  font-family: var(--serif);
  font-weight: 300;
  /* M5: font prati sirinu ekrana da najduza stavka ("Executive Protection")
     uvek stane u jedan red, i na 320px. Na 7vw je trazila 353px u 330px prostora. */
  font-size: clamp(1.9rem, 6.2vw, 4rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: var(--ink);
  transform: translateY(2rem);
  transition: transform 0.6s var(--ease), color 0.3s;
}
.nav-mobile a:hover { color: var(--bronze-dark); }
.nav-open .nav-mobile a { transform: translateY(0); }
.nav-mobile .nav-mobile-meta {
  margin-top: 4rem;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* M3: broj u meniju je tap-to-call, mora se videti da je link */
.nav-mobile .nav-mobile-meta a {
  font-family: var(--sans);
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: none;
  transform: none;
  color: var(--ink);
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 0.2rem;
}
/* Social ikone u mobilnom meniju (fidbek 3) */
.nav-mobile .nav-mobile-social { display: flex; gap: 1.6rem; margin-top: 2.6rem; }
.nav-mobile .nav-mobile-social a {
  display: inline-flex;
  width: 3.6rem;
  height: 3.6rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  transform: none;
  transition: color 0.3s, border-color 0.3s;
}
.nav-mobile .nav-mobile-social a:hover { color: var(--bronze-dark); border-color: var(--bronze); }
.nav-mobile .nav-mobile-social svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* ---------- Trajno WhatsApp dugme na telefonu (M2) ---------- */

.wa-float { display: none; }

@media (max-width: 900px) {
  .wa-float {
    display: flex;
    position: fixed;
    right: 2rem;
    bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    z-index: 250;
    width: 5.4rem;
    height: 5.4rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bronze-dark);
    color: #fff;
    box-shadow: 0 3px 16px rgba(20, 18, 16, 0.3);
    transition: background 0.3s var(--ease);
  }
  .wa-float svg { width: 2.7rem; height: 2.7rem; fill: currentColor; display: block; }
  .wa-float:hover, .wa-float:focus-visible { background: var(--bronze); }
  /* dok je meni otvoren dugme stoji preko stavki */
  .nav-open .wa-float { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.hero--short { min-height: 78svh; }
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: heroZoom 8s var(--ease) both;
}
/* Uski kadar na telefonu ume da odsece desnu stranu fotografije (Hotels: gost na vratima).
   Klasa pomera kadar udesno samo na telefonu, desktop ostaje netaknut. */
@media (max-width: 900px) {
  .hero-media img.hero-shift-r { object-position: 65% center; }
}
/* Executive Transportation hero: officer na poziciji stoji desno u fotografiji, a centriran
   kadar ga preseca ivicom. Mereno kroz sharp na tri vrednosti, 78% je jedina koja drzi
   sva tri lika cela. Vazi na svim sirinama. */
.hero-media img.hero-pos-78 { object-position: 78% center; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Citljivost hero teksta: mereno 11.08, stari gradijent je davao 1.65:1 na home kickeru.
     Donja polovina je pojacana dok svih 8 heroja nije preslo 4.5:1 na 95. percentilu svetline. */
  background: linear-gradient(to top, rgba(20,18,16,0.86) 0%, rgba(20,18,16,0.64) 34%, rgba(20,18,16,0.34) 62%, rgba(20,18,16,0.18) 100%);
}
.hero-inner {
  width: 100%;
  padding-bottom: 10rem;
}
/* Hero tekst stoji preko fotografije koja zna da bude jako svetla (jahte, beton, staklo).
   Gradijent sam nije dovoljan, pa tekst nosi i sopstvenu meku senku. Ne diramo fotografiju. */
.hero .kicker { color: #fff; text-shadow: 0 1px 3px rgba(20,18,16,0.85), 0 2px 14px rgba(20,18,16,0.65); }
.hero h1 { max-width: 20em; text-shadow: 0 2px 6px rgba(20,18,16,0.5), 0 4px 28px rgba(20,18,16,0.4); }
.hero-sub {
  max-width: 62rem;
  margin-top: 3rem;
  font-size: 1.7rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.92);
}
.hero .btn-row { margin-top: 4.4rem; }

/* Hero ulaz: čist CSS, ne zavisi od JS/CDN (pravilo iz memorije) */
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes heroUp { from { opacity: 0; transform: translateY(3rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroUpMove { from { transform: translateY(3rem); } to { transform: translateY(0); } }
.hero .kicker    { animation: heroUp 1.2s var(--ease) 0.2s both; }
.hero h1         { animation: heroUp 1.2s var(--ease) 0.35s both; }
.hero-sub        { animation: heroUp 1.2s var(--ease) 0.55s both; }
/* CTA red: samo kretanje, bez opacity : dugme ne sme da zavisi od animacije */
.hero .btn-row   { animation: heroUpMove 1.2s var(--ease) 0.7s both; }

/* Mobile intro ispod hero-a (opcija A, 25.07): desktop ga ne vidi */
.hero-intro-mobile { display: none; }

/* Desktop hero (25.07): slika na punu visinu ekrana, tekst blok nize, uz dno slike */
@media (min-width: 901px) {
  .hero--short { min-height: 100svh; }
  .hero-inner { padding-bottom: 5.2rem; }
  .hero-sub { margin-top: 2.4rem; }
  .hero .btn-row { margin-top: 3.2rem; }
}

/* ---------- Trust traka ---------- */

.trust-strip { border-bottom: 1px solid var(--line); background: var(--bg); }
.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem 6rem;
  padding-top: 2.6rem;
  padding-bottom: 2.6rem;
}
.trust-strip a { color: inherit; text-decoration: none; transition: color 0.35s var(--ease); }
.trust-strip a:hover { color: var(--bronze); }
.trust-strip span {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
}

/* ---------- Sekcije ---------- */

.section { padding: 13rem 0; }
.section--tight { padding: 9rem 0; }
.section--warm { background: var(--bg-warm); }
.section--white { background: var(--bg-card); }

.section-head { text-align: center; max-width: 92rem; margin: 0 auto 7rem; }
.section-head p { margin-top: 2.8rem; }

/* Veliki centrirani statement (GHC displayText) */
.statement { text-align: center; max-width: 100rem; margin: 0 auto; }
.statement .serif {
  font-size: clamp(2.4rem, 3.4vw, 3.8rem);
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0.01em;
}
.statement p:not(.serif) { margin-top: 3rem; max-width: 76rem; margin-left: auto; margin-right: auto; }

/* ---------- Kartice usluga (destacadoX3) ---------- */

.grid { display: grid; gap: 5rem; }
/* Grid deca ne smeju da razduvaju kolonu preko kontejnera (min-content blowout) */
.grid > *, .spec-row > *, .num-item > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card { background: transparent; }
.card-media { overflow: hidden; }
.card-media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  transition: transform 1.1s var(--ease);
}
.card--image-right .card-media img {
  object-position: left center !important;
}
/* kadar kartice pomeren udesno: officer i gost kog doceka oboje u kadru */
.card-media img.card-pos-70 { object-position: 70% center; }
/* Armed kartica: uspravni kadar 4:5 vidi 44,7% sirine, na 75% oba officera stanu cela */
.card-media img.card-pos-75 { object-position: 75% center; }
.card:hover .card-media img { transform: scale(1.05); }
.card h3 { font-size: 2.6rem; margin-top: 3rem; }
.card p { margin-top: 1.6rem; color: var(--ink-soft); font-size: 1.5rem; }
.card .link-line { display: inline-block; margin-top: 2.4rem; }
.card-media--wide img { aspect-ratio: 3 / 2; }

/* ---------- Edito split (slika + tekst) ---------- */

.edito {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9rem;
  align-items: center;
}
.edito-media { overflow: hidden; }
.edito-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.edito-media--wide img { aspect-ratio: 5 / 4; }
/* kadar pomeren ka levoj strani slike (prvi covek ceo u kadru) */
.edito-media img.edito-shift-l { object-position: 40% center; }
/* kadar pomeren ka desnoj strani slike (officer ceo u kadru na svim sirinama) */
.edito-media img.edito-shift-r { object-position: 65% center; }
/* kadar skroz uz desnu ivicu: oba officera u kadru */
.edito-media img.edito-pos-85 { object-position: 85% center; }
.edito-text h2 { margin-bottom: 3rem; }
.edito-text p + p { margin-top: 2rem; }
.edito-text .btn, .edito-text .link-line { margin-top: 3.6rem; }
.edito--flip .edito-media { order: 2; }
.edito--flip .edito-text { order: 1; }

/* ---------- Numerisana lista usluga ---------- */

.num-list { border-top: 1px solid var(--line); }
.num-item {
  display: grid;
  grid-template-columns: 8rem 1fr 2fr;
  gap: 4rem;
  padding: 4.2rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.num-item .num {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--bronze-dark);
}
.num-item h3 { font-size: 2.4rem; }
.num-item p { color: var(--ink-soft); font-size: 1.5rem; }

/* ---------- Stubovi (why) ---------- */

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6rem; }
.pillars--4 { grid-template-columns: repeat(4, 1fr); gap: 4.6rem; }
.pillar .num {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--bronze-dark);
  display: block;
  margin-bottom: 2rem;
}
.pillar h3 { font-size: 2.2rem; margin-bottom: 1.6rem; }
.pillar p { color: var(--ink-soft); font-size: 1.5rem; }

/* ---------- Testimonials (Google recenzije) ---------- */

/* Traka se pomera vodoravno (strelice + prevlacenje prstom), 3 kartice u kadru na desktopu.
   Padding 2rem gore i dole je vazduh oko citata, trazen 12.08. */
.testi-grid {
  display: flex;
  gap: 6rem;
  padding: 2rem 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testi-grid::-webkit-scrollbar { display: none; }
.testi-grid > * { min-width: 0; scroll-snap-align: start; }
.testi { margin: 0; display: flex; flex-direction: column; flex: 0 0 calc((100% - 12rem) / 3); }
.testi blockquote { margin: 0; flex: 1; }
.testi blockquote p {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.testi figcaption {
  margin-top: 2.4rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.testi figcaption span {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  color: var(--bronze-dark);
}
.testi-cta { margin-top: 4.4rem; text-align: center; }

/* Strelice: iste tanke linije kao dugmad i social kvadrati, bez animacije prozirnosti */
.testi-nav { display: flex; justify-content: center; gap: 1.4rem; margin-top: 4.4rem; }
.testi-nav[hidden] { display: none; }
.testi-arrow {
  width: 5rem;
  height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.testi-arrow svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.testi-arrow:hover, .testi-arrow:focus-visible { color: var(--bronze-dark); border-color: var(--bronze); }
/* Kraj trake: strelica se stisava, NIKAD ne nestaje (pravilo o prozirnosti dugmadi) */
.testi-arrow.is-off, .testi-arrow.is-off:hover { color: var(--line); border-color: var(--line); cursor: default; }

@media (max-width: 900px) {
  .testi-grid { gap: 4.6rem; }
  .testi { flex: 0 0 100%; }
  .testi-nav { margin-top: 3.6rem; }
  .testi-cta { margin-top: 3.6rem; }
}

/* ---------- Spec tabela (standardi/licence) ---------- */

.spec { border-top: 1px solid var(--line); }
.spec-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  padding: 3.2rem 0;
  border-bottom: 1px solid var(--line);
}
.spec-row dt {
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.spec-row dd { color: var(--ink-soft); }

/* ---------- Galerija (masonry) ---------- */

.masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.masonry figure { overflow: hidden; }
.masonry img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.masonry figure:hover img { transform: scale(1.04); }
.masonry .tall img { aspect-ratio: 3 / 4; }
.masonry .tall.image-align-left img { object-position: 50% center; }
.masonry .tall.image-align-right img { object-position: 70% center; }
.masonry .tall.image-pos-35 img { object-position: 35% center; }
/* Nekadasnja klasa image-pos-65 uklonjena 17.08.2026: taktivcka fotka je zamenjena
   (venues-tactical-2026b), nova je simetricna pa joj odgovara podrazumevani kadar 50%. */
.masonry .wide img { aspect-ratio: 3 / 2; }

/* ---------- FAQ accordion ---------- */

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  padding: 3rem 0;
  text-align: left;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.1rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.faq-q .faq-icon {
  flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem;
  position: relative;
}
.faq-q .faq-icon::before, .faq-q .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  background: var(--bronze-dark);
  transition: transform 0.4s var(--ease);
}
.faq-q .faq-icon::after { transform: rotate(90deg); }
.faq-item.open .faq-icon::after { transform: rotate(0deg); }
/* Sklopljeno samo kad JS radi (html.js iz inline skripte u head-u);
   bez JS-a svi odgovori ostaju vidljivi */
.js .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease);
}
.faq-a p { padding: 0 0 3rem; color: var(--ink-soft); max-width: 84rem; }

/* ---------- CTA band ---------- */

.cta-band { background: var(--bg-warm); text-align: center; }
.cta-band h2 { max-width: 22em; margin: 0 auto; }
.cta-band p { margin: 2.6rem auto 0; max-width: 62rem; color: var(--ink-soft); }
.cta-band .btn-row { justify-content: center; margin-top: 4.6rem; }

/* ---------- Forma ---------- */

.form { max-width: 68rem; }
.form--center { margin: 0 auto; }
.field { margin-bottom: 3.2rem; }
.field label {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 1.2rem;
  color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink-soft);
  background: transparent;
  padding: 1rem 0;
  font-family: var(--sans);
  font-size: 1.6rem;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--bronze-dark);
}
.field textarea { min-height: 12rem; resize: vertical; }
.field-opt {
  font-weight: 400;
  letter-spacing: 0.12em;
  opacity: 0.6;
  margin-left: 0.8rem;
}

/* Honeypot: van ekrana, ne display:none, jer neki botovi preskacu sakrivena polja */
.field-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Poruka posle slanja. Bez opacity animacije: element mora da ostane vidljiv. */
.form-status {
  margin-top: 2rem;
  font-size: 1.5rem;
  line-height: 1.5;
  padding: 1.6rem 2rem;
  border-left: 2px solid var(--bronze-dark);
  background: rgba(0, 0, 0, 0.03);
}
.form-status[hidden] { display: none; }
.form-status.is-error { border-left-color: #a33; }
.form[data-sending="1"] button[type="submit"] { pointer-events: none; opacity: 0.55; }

/* ---------- Check lista (obuka, dokazi poverenja) ---------- */

.check-list {
  list-style: none;
  margin: 2.4rem 0 3.2rem;
  display: grid;
  gap: 1.2rem;
}
.check-list li {
  position: relative;
  padding-left: 2.8rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 1.1rem;
  height: 0.6rem;
  border-left: 1.5px solid var(--bronze);
  border-bottom: 1.5px solid var(--bronze);
  transform: rotate(-45deg);
}
.check-list--2 { grid-template-columns: 1fr; }
@media (min-width: 901px) {
  .check-list--2 { grid-template-columns: 1fr 1fr; gap: 1.2rem 4rem; }
}
/* Lista centrirana ispod centriranog naslova; stavke ostaju levo poravnate zbog kvacica */
.check-list--center {
  max-width: 78rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* ---------- Tag lista (tipovi dogadjaja, industrije) ---------- */

.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.tag-list li {
  border: 1px solid var(--line);
  padding: 1.2rem 2.4rem;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.4);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 8rem 0 4rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr 1fr .85fr 1fr;
  gap: 5rem 3.6rem;
  margin-bottom: 6rem;
}
.footer-brand .brand { color: var(--ink); font-size: 1.8rem; }
/* grb u footeru prati manji font imena */
.footer-brand .brand-mark { width: 2.8rem; height: 3.25rem; }
.footer-brand p { margin-top: 2rem; max-width: 30rem; color: var(--ink-soft); font-size: 1.4rem; }
.footer-col h4 {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  margin-bottom: 2.4rem;
  color: var(--ink-soft);
}
.footer-col a {
  display: block;
  font-size: 1.4rem;
  padding: 0.5rem 0;
  color: var(--ink);
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--bronze-dark); }
.footer-social { display: flex; gap: 1.6rem; margin-top: 2.4rem; }
.footer-social a {
  display: inline-flex;
  width: 3.6rem;
  height: 3.6rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: color 0.3s, border-color 0.3s;
}
.footer-social a:hover { color: var(--bronze-dark); border-color: var(--bronze); }
.footer-social svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-trust {
  border-top: 1px solid var(--line);
  padding-top: 3rem;
  margin-bottom: 3rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem 2.4rem;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.footer-trust span { display: inline-flex; align-items: center; }
.footer-trust span:not(:last-child)::after {
  content: '\2022';
  margin-left: 2.4rem;
  color: var(--bronze);
}
.footer-trust + .footer-bottom { border-top: 0; padding-top: 0; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 3rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Scroll reveal (IntersectionObserver, bez CDN) ---------- */

/* Početno stanje samo kad JS radi: ako main.js ne stigne, sve je vidljivo */
.js .rv { opacity: 0; transform: translateY(3.6rem); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .rv.on { opacity: 1; transform: translateY(0); }
/* Kontejneri koji sadrže dugmad: samo kretanje, nikad opacity */
.js .rv-move { transform: translateY(3.6rem); transition: transform 0.9s var(--ease); }
.js .rv-move.on { transform: translateY(0); }
.rv-d1 { transition-delay: 0.12s; }
.rv-d2 { transition-delay: 0.24s; }
.rv-d3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media img, .hero .kicker, .hero h1, .hero-sub, .hero .btn-row { animation: none !important; }
  .rv, .rv-move { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card-media img, .masonry img { transition: none; }
}

/* ---------- Responsive ---------- */

/* Sa dodatim social ikonama (fidbek 3) nav na uzim laptopima trazi tesnji razmak,
   inace dodirne logo na 1181-1300px. Mereno, ne procenjeno. */
@media (max-width: 1400px) {
  .nav-desktop { gap: 2.4rem; }
  .header-social + .header-social { margin-left: -1.2rem; }
}
@media (max-width: 1240px) {
  /* 1,5rem umesto 1,9rem otkad logo nosi i grb: na 1181px je razmak logo/nav bio pao na 0 */
  .nav-desktop { gap: 1.5rem; }
  .site-header .brand-mark { width: 2.8rem; height: 3.25rem; }
  .site-header .brand { gap: 0.9rem; }
}

/* Uski telefoni: logo, slusalica i burger dele isti red. Sa punim logotipom (241px na 320px
   ekranu) burger je izlazio iz kadra jos pre dodavanja slusalice. Mereno, ne procenjeno. */
@media (max-width: 420px) {
  .brand { font-size: 1.7rem; letter-spacing: 0.14em; }
}

@media (max-width: 1180px) {
  .container { padding: 0 3.6rem; }
  .edito { gap: 5rem; }
  .pillars { gap: 4rem; }
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
  .header-actions { display: flex; }
}

@media (max-width: 900px) {
  .section { padding: 8.4rem 0; }
  .section--tight { padding: 6rem 0; }
  .grid--3, .grid--2, .pillars { grid-template-columns: 1fr; }
  .edito, .edito--flip { grid-template-columns: 1fr; gap: 4rem; }
  .edito--flip .edito-media { order: 0; }
  .num-item { grid-template-columns: 5rem 1fr; }
  .num-item p { grid-column: 2; }
  .spec-row { grid-template-columns: 1fr; gap: 1rem; padding: 2.4rem 0; }
  .masonry { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .hero-inner { padding-bottom: 7rem; }
  /* M4: vazduh iznad browser trake, plus mesta za plutajuce WhatsApp dugme */
  .site-footer { padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 560px) {
  .container { padding: 0 2rem; }
  .masonry { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .trust-strip .container { gap: 1.2rem 2.8rem; }

  /* Hero na telefonu: bez eyebrow-a, manji naslov, kompaktna dugmad */
  .hero .kicker { display: none; }
  .t-hero { font-size: clamp(2.9rem, 8.5vw, 3.6rem); }
  .t-xl { font-size: 2.3rem; }
  /* Naslovi sa nbsp parom "Confidential Consultation": font prati sirinu ekrana
     da vezani par uvek stane u red (371px na 2.3rem probija 350px kontejner) */
  .h-consult { font-size: min(2.3rem, 5.3vw); }
  .t-lg { font-size: 2.2rem; }
  /* Rucne prelome iz desktopa pusti da teku prirodno na telefonu */
  .hero h1 br { display: none; }
  /* Na telefonu naslovi teku prirodno uz orphan zastitu, bez balance rastezanja */
  h1 { text-wrap: pretty; }
  /* Numerisane liste: manji broj i naslov da naslov stane u red */
  .num-item { grid-template-columns: 3.6rem 1fr; gap: 1.2rem 1.8rem; padding: 3rem 0; }
  .num-item h3 { font-size: 2rem; }
  /* Opcija A: podnaslov izlazi iz slike u intro blok ispod hero-a */
  .hero { min-height: 72svh; }
  .hero--short { min-height: 64svh; }
  .hero-sub { display: none; }
  .hero .btn-row { margin-top: 3rem; }
  /* Na telefonu samo primarni CTA u hero-u; telefon je vec u burger meniju */
  .hero .btn-row .btn:nth-child(2) { display: none; }
  .hero-inner { padding-bottom: 4.6rem; }
  .hero-intro-mobile { display: block; padding: 3.4rem 0 3.8rem; }
  .hero-intro-mobile p {
    font-size: 1.55rem;
    line-height: 1.8;
    color: var(--ink-soft);
    max-width: 46rem;
  }

  /* Footer na telefonu: 2 kolone, sitniji font, bez blurba */
  /* M4: donji padding 3rem je bio pretesan, sadrzaj je sedeo na browser traci */
  .site-footer { padding: 5.6rem 0 calc(8.4rem + env(safe-area-inset-bottom, 0px)); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 3.2rem 2.4rem; margin-bottom: 4rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { display: none; }
  /* Company (2 linka) ide poslednji, da Services i Contact stoje uporedo */
  .footer-grid .footer-col:nth-child(3) { order: 1; }
  .footer-col h4 { font-size: 1rem; letter-spacing: 0.2em; margin-bottom: 1.4rem; }
  .footer-col a { font-size: 1.3rem; padding: 0.4rem 0; }
  .footer-bottom { font-size: 1.05rem; gap: 0.8rem; flex-direction: column; align-items: center; text-align: center; padding-top: 2.4rem; }
  .footer-social { margin-top: 1.8rem; }
  .footer-trust { padding-top: 2.4rem; margin-bottom: 2.4rem; font-size: 1rem; gap: 0.6rem 1.6rem; letter-spacing: 0.14em; }
  /* separatori na telefonu padaju na kraj reda, pa idu napolje */
  .footer-trust span:not(:last-child)::after { content: none; }
  .footer-trust + .footer-bottom { padding-top: 0; }
  .btn {
    width: auto;
    text-align: center;
    padding: 1.2rem 2.2rem;
    font-size: 1rem;
    letter-spacing: 0.18em;
  }
  .btn-row { gap: 1.2rem; }
}