/* Civalska Editorial - tokeni i osnovni stilovi.
   Izvor istine je aktivni dizajn sistem "civalska-editorial". */

:root {
	--civ-bg: #FFFFFF;
	--civ-surface: #D6F5FF;
	--civ-ink: #3A3A3A;
	--civ-accent: #F8A159;
	--civ-deep: #2D6187;
	--civ-sky: #59B6F8;

	--civ-rule-light: rgba(58, 58, 58, 0.16);
	--civ-rule-dark: rgba(255, 255, 255, 0.22);

	--civ-font-heading: 'Anton', sans-serif;
	--civ-font-display: 'Bricolage Grotesque', sans-serif;
	--civ-font-body: 'Hanken Grotesk', sans-serif;
	--civ-font-script: 'Caveat', cursive;

	--civ-xs: 8px;
	--civ-sm: 16px;
	--civ-md: 28px;
	--civ-lg: 52px;
	--civ-xl: 88px;

	--civ-radius-sm: 4px;
	--civ-radius-md: 8px;

	--civ-measure: 62ch;
	--civ-maxw: 1280px;
}

body {
	background: var(--civ-bg);
	color: var(--civ-ink);
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.55;
}

@media (max-width: 767px) { body { font-size: 16px; } }

h1, h2, h3, h4 {
	font-family: var(--civ-font-heading);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.005em;
	color: inherit;
	text-wrap: balance;
}

.civ-script { font-family: var(--civ-font-script); font-weight: 600; }

.civ-eyebrow,
.civ-eyebrow .elementor-heading-title {
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.4;
}

p { max-width: var(--civ-measure); }

.civ-ground-white { background: var(--civ-bg); color: var(--civ-ink); }
.civ-ground-pale { background: var(--civ-surface); color: var(--civ-ink); }
.civ-ground-deep { background: var(--civ-deep); color: #FFFFFF; }
.civ-ground-ink { background: var(--civ-ink); color: #FFFFFF; }

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

.civalska-cta > a,
.elementor .civ-btn-primary .elementor-button,
.elementor .civ-btn-primary a.elementor-button {
	display: inline-block;
	background-color: var(--civ-accent);
	color: var(--civ-ink);
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.94rem;
	letter-spacing: 0.01em;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--civ-radius-sm);
	box-shadow: none;
	fill: var(--civ-ink);
	text-decoration: none;
	transition: background-color 160ms ease, transform 160ms ease;
}

.civalska-cta > a:hover,
.civalska-cta > a:focus-visible,
.elementor .civ-btn-primary .elementor-button:hover,
.elementor .civ-btn-primary .elementor-button:focus-visible {
	background-color: #F59440;
	color: var(--civ-ink);
	transform: translateY(-1px);
}

.elementor .civ-btn-secondary .elementor-button,
.elementor .civ-btn-secondary a.elementor-button {
	background-color: transparent;
	color: #FFFFFF;
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.94rem;
	padding: 13px 24px;
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: var(--civ-radius-sm);
	box-shadow: none;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.elementor .civ-btn-secondary .elementor-button:hover,
.elementor .civ-btn-secondary .elementor-button:focus-visible {
	border-color: #FFFFFF;
	background-color: rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
}

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 220ms ease, border-color 220ms ease;
}

.site-header.civ-scrolled {
	background: var(--civ-deep);
	border-bottom-color: var(--civ-rule-dark);
}

.site-header a { font-family: var(--civ-font-body); text-decoration: none; color: #FFFFFF; }

.site-header .menu li a { position: relative; font-weight: 400; font-size: 0.94rem; padding-bottom: 3px; }

.site-header .menu li:not(.civalska-cta) a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--civ-accent);
	transition: right 200ms ease;
}

.site-header .menu li:not(.civalska-cta) a:hover::after,
.site-header .menu li:not(.civalska-cta) a:focus-visible::after { right: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
	outline: 2px solid var(--civ-accent);
	outline-offset: 3px;
}

[id] { scroll-margin-top: 92px; }
html { scroll-behavior: smooth; }

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

.civ-hero { position: relative; overflow: clip; }

.civ-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255,255,255,0.055) 1px, transparent 1px);
	background-size: 25% 100%;
	pointer-events: none;
}

.civ-hero .e-con-inner { align-items: center; gap: var(--civ-lg); position: relative; z-index: 1; }

.civ-hero-text { flex: 1 1 54%; min-width: 0; }

.civ-hero-text .civ-eyebrow { color: var(--civ-surface); margin-bottom: 20px; }

/* Crtica ispred oznake je uklonjena: uvlacila je prvi red, pa se pri
   prelamanju gubilo poravnanje. */

.civ-hero-h1,
.civ-hero-h1 .elementor-heading-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(2.3rem, 4.5vw, 4rem);
	line-height: 1.0;
	letter-spacing: -0.025em;
	color: #FFFFFF;
	margin: 0 0 14px;
	max-width: 21ch;
}

.civ-hero-sub,
.civ-hero-sub .elementor-heading-title {
	font-family: var(--civ-font-heading);
	font-size: clamp(1.15rem, 1.9vw, 1.7rem);
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--civ-surface);
	margin: 0 0 24px;
}

.civ-hero-lede { color: #FFFFFF; font-weight: 400; margin-bottom: 30px; }
.civ-hero-lede p { max-width: 52ch; margin: 0; }

.civ-hero-actions { gap: 14px; flex-wrap: wrap; }

/* Hero vizual: prava fotografija u okviru, sa pomerenim blokom iza. */
.civ-hero-visual { position: relative; flex: 1 1 42%; min-width: 0; }

.civ-hero-visual::before {
	content: '';
	position: absolute;
	right: -28px;
	top: -28px;
	width: 62%;
	height: 58%;
	border: 1px solid var(--civ-rule-dark);
	border-radius: var(--civ-radius-md);
}

.civ-hero-visual::after {
	content: '';
	position: absolute;
	left: -44px;
	bottom: -34px;
	width: 44%;
	height: 34%;
	border-radius: var(--civ-radius-md);
	background: var(--civ-surface);
	z-index: 0;
}

.civ-hero-photo { position: relative; z-index: 1; }

.civ-hero-photo img {
	width: 100%;
	height: 480px;
	object-fit: cover;
	object-position: center 22%;
	border-radius: var(--civ-radius-md);
	display: block;
	filter: saturate(0.92) contrast(1.04);
}

@media (max-width: 1024px) {
	.civ-hero .e-con-inner { flex-direction: column; align-items: flex-start; }
	.civ-hero-text, .civ-hero-visual { flex: 1 1 100%; width: 100%; }
	.civ-hero-h1, .civ-hero-h1 .elementor-heading-title { max-width: 100%; }
	.civ-hero-photo img { height: 360px; }
	.civ-hero-visual::before { right: -12px; top: -12px; }
	.civ-hero-visual::after { left: -12px; bottom: -16px; }
}

@media (max-width: 640px) {
	.civ-hero-photo img { height: 280px; }
	.civ-hero-actions .elementor-widget { width: 100%; }
	.civ-hero-actions .elementor-button { width: 100%; text-align: center; }
	.civ-hero::before { background-size: 50% 100%; }
}

/* ---- Trust strip ---- */

.civ-trust { border-bottom: 1px solid var(--civ-rule-light); }
.civ-trust .e-con-inner { align-items: stretch; gap: 0; }

.civ-trust-item { flex: 1 1 33%; min-width: 0; padding: 4px var(--civ-md) 4px 0; }

.civ-trust-item + .civ-trust-item {
	border-left: 1px solid var(--civ-rule-light);
	padding-left: var(--civ-md);
}

.civ-trust-num,
.civ-trust-num .elementor-heading-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(2.8rem, 4.6vw, 3.8rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--civ-deep);
	margin: 0 0 6px;
}

.civ-trust-label,
.civ-trust-label .elementor-heading-title {
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--civ-ink);
	max-width: 26ch;
}

@media (max-width: 860px) {
	.civ-trust .e-con-inner { flex-direction: column; }
	.civ-trust-item { flex: 1 1 100%; width: 100%; padding: 14px 0; }
	.civ-trust-item + .civ-trust-item {
		border-left: 0;
		border-top: 1px solid var(--civ-rule-light);
		padding-left: 0;
	}
	.civ-trust-label, .civ-trust-label .elementor-heading-title { max-width: 100%; }
}

/* ---- Problem i pozicioniranje ---- */

.civ-problem .e-con-inner { gap: 0; }

.civ-problem-h2,
.civ-problem-h2 .elementor-heading-title {
	font-size: clamp(1.85rem, 3.2vw, 2.85rem);
	line-height: 1.06;
	color: var(--civ-ink);
	max-width: 19ch;
	margin: 0 0 var(--civ-md);
}

.civ-problem-cols { gap: var(--civ-lg); align-items: flex-start; }
.civ-problem-lede { flex: 1 1 46%; min-width: 0; }
.civ-problem-lede p { max-width: 40ch; margin: 0; color: var(--civ-ink); }

.civ-problem-list { flex: 1 1 46%; min-width: 0; }

.civ-problem-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--civ-rule-light);
}

.civ-problem-list li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid var(--civ-rule-light);
	font-size: 1rem;
	line-height: 1.4;
}

.civ-problem-list li::before {
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 1px;
	background: var(--civ-sky);
	transform: translateY(-2px);
}

@media (max-width: 860px) {
	.civ-problem-cols { flex-direction: column; gap: var(--civ-md); }
	.civ-problem-lede, .civ-problem-list { flex: 1 1 100%; width: 100%; }
	.civ-problem-lede p { max-width: 100%; }
}

/* ---- Veliki statement ---- */

.civ-statement { position: relative; }

.civ-statement .e-con-inner { gap: var(--civ-md); }

.civ-statement-text,
.civ-statement-text .elementor-heading-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 6vw, 4.6rem);
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: #FFFFFF;
	margin: 0;
	max-width: 16ch;
}

.civ-statement-note,
.civ-statement-note p {
	font-family: var(--civ-font-body);
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.74);
	max-width: 42ch;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* Header: samo logo, bez opisa sajta. */
.site-header .site-description { display: none; }

.site-header .site-branding { gap: 0; }

.site-header .custom-logo {
	height: 34px;
	width: auto;
}

/* ---- Elementor Kit override ----
   Elementor generise post-N.css iz svog Kit-a i taj fajl se ucitava POSLE ovog.
   Postavlja boje iz Kit palete i Roboto na svaki widget, sa istom specificnoscu
   kao pravila iznad, pa pobedjuje redosledom. Pravila ispod nose jedan selektor
   vise, pa pobedjuju po specificnosti i ne zavise od redosleda ucitavanja. */

body .elementor-widget-heading .elementor-heading-title {
	font-family: var(--civ-font-heading);
	color: inherit;
}

body .elementor-widget-text-editor {
	font-family: var(--civ-font-body);
	color: inherit;
}

body .civ-eyebrow .elementor-heading-title {
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
}

body .civ-hero-text .civ-eyebrow .elementor-heading-title { color: var(--civ-surface); }

body .civ-hero-h1 .elementor-heading-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	color: #FFFFFF;
}

body .civ-hero-sub .elementor-heading-title {
	font-family: var(--civ-font-heading);
	color: var(--civ-surface);
}

body .civ-hero-lede,
body .civ-hero-lede p {
	color: #FFFFFF;
	font-weight: 400;
}

/* Razmak izmedju pratećeg teksta i dugmadi. */
body .civ-hero-actions { margin-top: 18px; }

body .civ-trust-num .elementor-heading-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	color: var(--civ-deep);
}

body .civ-trust-label .elementor-heading-title {
	font-family: var(--civ-font-body);
	font-weight: 300;
	color: var(--civ-ink);
}

body .civ-problem-h2 .elementor-heading-title {
	font-family: var(--civ-font-heading);
	color: var(--civ-ink);
}

body .civ-problem-lede,
body .civ-problem-lede p,
body .civ-problem-list,
body .civ-problem-list li { color: var(--civ-ink); }

body .civ-statement-text .elementor-heading-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	color: #FFFFFF;
}

body .civ-statement-note,
body .civ-statement-note p { color: rgba(255, 255, 255, 0.74); }

/* ---- Full-service sekcija (5.4) ---- */

.civ-full { position: relative; overflow: clip; }

.civ-full .e-con-inner { gap: var(--civ-lg); }

.civ-full-top { gap: var(--civ-lg); align-items: center; }

.civ-full-intro { flex: 1 1 56%; min-width: 0; }

body .civ-full-h2 .elementor-heading-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: 1.0;
	letter-spacing: -0.025em;
	color: #FFFFFF;
	margin: 0 0 20px;
	max-width: 18ch;
}

body .civ-full-lede,
body .civ-full-lede p {
	color: #FFFFFF;
	font-weight: 400;
	margin: 0;
	max-width: 54ch;
}

.civ-full-cta { margin-top: 24px; }

.civ-full-visual { position: relative; flex: 1 1 38%; min-width: 0; }

.civ-full-visual::after {
	content: '';
	position: absolute;
	right: -34px;
	top: -30px;
	width: 48%;
	height: 36%;
	border-radius: var(--civ-radius-md);
	background: var(--civ-sky);
	z-index: 0;
}

.civ-full-photo { position: relative; z-index: 1; }

.civ-full-photo img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	object-position: center 20%;
	border-radius: var(--civ-radius-md);
	display: block;
}

/* Deset stavki u dve kolone, razdvojene tankim linijama. */
.civ-full-list { width: 100%; }

.civ-full-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: var(--civ-lg);
}

body .civ-full-list li {
	break-inside: avoid;
	border-top: 1px solid var(--civ-rule-dark);
	padding: 14px 0;
	font-family: var(--civ-font-body);
	font-weight: 400;
	font-size: 0.98rem;
	line-height: 1.4;
	color: #FFFFFF;
	display: flex;
	align-items: baseline;
	gap: 14px;
}

/* Marker je bledoplav, ne svetloplav: svetloplava na tamnoplavoj daje 2,99
   pa se kockica gubi. Bledoplava je na 5,79 i cita se jasno. */
body .civ-full-list li::before {
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 1px;
	background: var(--civ-surface);
	transform: translateY(-2px);
}

@media (max-width: 1024px) {
	.civ-full-top { flex-direction: column; align-items: flex-start; }
	.civ-full-intro, .civ-full-visual { flex: 1 1 100%; width: 100%; }
	.civ-full-photo img { height: 320px; }
	.civ-full-visual::after { right: -14px; top: -14px; }
}

@media (max-width: 767px) {
	.civ-full-list ul { columns: 1; }
	.civ-full-photo img { height: 260px; }
	.civ-full-cta .elementor-button { width: 100%; text-align: center; }
}

/* ---- Sve usluge (5.5) ----
   Editorial indeks: pun red po usluzi, naziv levo, opis desno.
   Namerno tise od full-service sekcije: bela podloga, manji tip, bez CTA. */

.civ-serv .e-con-inner { gap: var(--civ-md); }

body .civ-serv-h2 .elementor-heading-title {
	font-family: var(--civ-font-heading);
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	line-height: 1.08;
	color: var(--civ-ink);
	margin: 0 0 var(--civ-xs);
	max-width: 22ch;
}

body .civ-serv-note,
body .civ-serv-note p {
	color: rgba(58, 58, 58, 0.75);
	max-width: 52ch;
	margin: 0;
	font-size: 0.98rem;
}

.civ-serv-list { width: 100%; margin-top: var(--civ-sm); }

.civ-serv-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--civ-rule-light);
}

body .civ-serv-list li {
	display: grid;
	grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
	gap: var(--civ-md);
	align-items: baseline;
	padding: 20px 0;
	border-bottom: 1px solid var(--civ-rule-light);
	margin: 0;
}

body .civ-serv-list li .civ-serv-name {
	font-family: var(--civ-font-body);
	font-weight: 600;
	letter-spacing: 0.005em;
	font-size: 1.06rem;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--civ-ink);
}

body .civ-serv-list li .civ-serv-desc {
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 0.98rem;
	line-height: 1.5;
	color: rgba(58, 58, 58, 0.86);
}

body .civ-serv-list li:hover .civ-serv-name { color: var(--civ-deep); }

@media (max-width: 767px) {
	body .civ-serv-list li .civ-serv-name { font-size: 1.05rem; }
}

/* ---- Header: fiksan i transparentan preko heroja (2.3) ---- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: transparent;
	border-bottom: 1px solid transparent;
}

.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

body .site-header .header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px 24px;
}

body:not(.home) .site-main { padding-top: 88px; }

body .site-header .custom-logo {
	height: 42px;
	width: auto;
}

@media (max-width: 640px) {
	body .site-header .custom-logo { height: 34px; }
}

/* ---- Trust traka: poravnanje na vrh, tesniji odnos broja i opisa ---- */

.civ-trust .e-con-inner { align-items: flex-start; }

body .civ-trust-num .elementor-heading-title { margin: -6px 0 2px; }

body .civ-trust-label .elementor-heading-title { max-width: 24ch; }

/* ---- Footer (11.2) ---- */

.civ-footer {
	background: var(--civ-deep);
	color: #FFFFFF;
	padding: var(--civ-xl) 24px var(--civ-md);
}

.civ-footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr);
	gap: var(--civ-lg);
	align-items: start;
}

.civ-footer .custom-logo { height: 34px; width: auto; }

.civ-footer-claim {
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.78);
	margin: 14px 0 0;
	max-width: 28ch;
}

.civ-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px var(--civ-md);
}

.civ-footer-nav li { margin: 0; }

.civ-footer-nav a {
	font-family: var(--civ-font-body);
	font-weight: 400;
	font-size: 0.94rem;
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 160ms ease;
}

.civ-footer-nav a:hover,
.civ-footer-nav a:focus-visible { border-bottom-color: var(--civ-accent); }

.civ-footer-nav li.civalska-cta { grid-column: 1 / -1; margin-top: 6px; }

.civ-footer-nav li.civalska-cta a {
	display: inline-block;
	background: var(--civ-accent);
	color: var(--civ-ink);
	font-weight: 600;
	padding: 11px 20px;
	border-radius: var(--civ-radius-sm);
	border-bottom: 0;
}

.civ-footer-nav li.civalska-cta a:hover { background: #F59440; border-bottom: 0; }

.civ-footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.civ-footer-line {
	font-family: var(--civ-font-body);
	font-size: 0.98rem;
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.civ-footer-line:hover { border-bottom-color: var(--civ-accent); }

.civ-footer-social {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.civ-footer-social a {
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}

.civ-footer-social a:hover { color: #FFFFFF; }

.civ-footer-legal {
	max-width: 1280px;
	margin: var(--civ-lg) auto 0;
	padding-top: var(--civ-md);
	border-top: 1px solid var(--civ-rule-dark);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--civ-sm);
}

.civ-footer-legal-text {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	max-width: none;
	font-family: var(--civ-font-body);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.74);
}

.civ-footer-pib {
	color: #FFFFFF;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.civ-footer-copy {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.74);
}

@media (max-width: 900px) {
	.civ-footer-inner { grid-template-columns: 1fr; gap: var(--civ-md); }
	.civ-footer-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.civ-footer-legal { flex-direction: column; }
}

/* civ-footer-width-guard: Hello Elementor sabija footer na 800px preko
   .site-footer:not(.dynamic-footer). Ovo garantuje punu sirinu bez obzira na klase. */
html { background: var(--civ-bg); }

body .site-footer.civ-footer {
	max-width: 100%;
	width: 100%;
	margin-inline: 0;
	padding-inline: 24px;
}

@media (max-width: 767px) {
	body .site-footer.civ-footer { padding-inline: 16px; }
}

/* ---- Kako radimo (5.6) ----
   Horizontalna traka od pet koraka. Bez okvira i kartica: svaki korak nosi
   samo liniju iznad i preuvelican redni broj. Na uzem ekranu prelazi u kolonu. */

.civ-proc .e-con-inner { gap: var(--civ-md); }

body .civ-proc-h2 .elementor-heading-title {
	font-family: var(--civ-font-heading);
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	line-height: 1.08;
	color: var(--civ-ink);
	margin: 0;
	max-width: 20ch;
}

body .civ-proc-note,
body .civ-proc-note p {
	color: rgba(58, 58, 58, 0.78);
	max-width: 54ch;
	margin: 0;
	font-size: 0.98rem;
}

.civ-proc-track {
	gap: var(--civ-md);
	align-items: stretch;
	margin-top: var(--civ-sm);
}

.civ-proc-step {
	flex: 1 1 0;
	min-width: 0;
	border-top: 1px solid rgba(45, 97, 135, 0.3);
	padding: var(--civ-sm) 0 0;
	gap: 0;
}

body .civ-proc-num .elementor-heading-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(1.8rem, 2.6vw, 2.4rem);
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: var(--civ-deep);
	margin: 0 0 10px;
}

body .civ-proc-title .elementor-heading-title {
	font-family: var(--civ-font-body);
	font-weight: 600;
	letter-spacing: 0.005em;
	font-size: 1.06rem;
	line-height: 1.2;
	color: var(--civ-ink);
	margin: 0 0 8px;
}

body .civ-proc-desc,
body .civ-proc-desc p {
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 0.92rem;
	line-height: 1.45;
	color: rgba(58, 58, 58, 0.86);
	margin: 0;
	max-width: none;
}

@media (max-width: 1024px) {
	.civ-proc-track { flex-wrap: wrap; }
	.civ-proc-step { flex: 1 1 45%; }
}

@media (max-width: 640px) {
	.civ-proc-track { flex-direction: column; gap: 0; }
	.civ-proc-step { flex: 1 1 100%; width: 100%; padding: 14px 0 18px; }
}

/* civ-smoothing-scope: tanjenje poteza pomaze samo kada je belo slovo na tamnoj
   podlozi. Na svetloj podlozi cini tamno slovo bledim i mutnim, pa se tamo ne koristi.
   Anton je display font i ispod 1.5rem se stapa, zato ga drzimo samo na naslovima. */
.civ-hero,
.civ-statement,
.civ-full,
.civ-footer {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---- Logo traka (7.4) ----
   Neprekidna horizontalna petlja. Lista se renderuje dva puta, pa pomeranje
   za tacno polovinu sirine daje petlju bez skoka. Pauza na hover i na focus.
   Pod prefers-reduced-motion prelazi u staticnu mrezu, kako trazi 9.4. */

.civ-ticker {
	width: 100%;
	overflow: hidden;
	position: relative;
	margin-top: var(--civ-md);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.civ-ticker-track {
	display: flex;
	width: max-content;
	animation: civ-ticker-scroll 90s linear infinite;
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
	.civ-ticker:hover .civ-ticker-track { animation-play-state: paused; }
}

.civ-ticker:focus-within .civ-ticker-track { animation-play-state: paused; }

.civ-ticker-list {
	display: flex;
	align-items: center;
	gap: var(--civ-lg);
	list-style: none;
	margin: 0;
	padding: 0 var(--civ-md) 0 0;
}

.civ-ticker-item {
	flex: 0 0 auto;
	margin: 0;
	width: 130px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.civ-ticker-item img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter 220ms ease, opacity 220ms ease;
}

.civ-ticker-item img:hover { filter: grayscale(0); opacity: 1; }

@keyframes civ-ticker-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 767px) {
	.civ-ticker {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.civ-ticker-list { gap: var(--civ-md); }
	.civ-ticker-item { width: 96px; height: 26px; }
	.civ-ticker-track { animation-duration: 60s; }
}

@media (prefers-reduced-motion: reduce) {
	.civ-ticker { -webkit-mask-image: none; mask-image: none; overflow: visible; }
	.civ-ticker-track { animation: none; width: 100%; }
	.civ-ticker-track .civ-ticker-list[aria-hidden="true"] { display: none; }
	.civ-ticker-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
		gap: var(--civ-md);
		padding: 0;
		place-items: center;
	}
}

/* ---- Tim (5.9) + hover specifikacija (7.3) ----
   Fotografija A stoji u crno-beloj obradi. Na hover i na tastaturni fokus
   crossfade ka fotografiji B u boji, 300ms. Ime i pozicija su uvek vidljivi.
   Na dodir nema hovera, pa se odmah prikazuje fotografija u boji. */

body .civ-team-h2 .elementor-heading-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(1.8rem, 3.4vw, 3rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--civ-ink);
	margin: 0 0 18px;
	max-width: 20ch;
}

body .civ-team-lede,
body .civ-team-lede p {
	color: rgba(58, 58, 58, 0.86);
	max-width: 58ch;
	margin: 0;
}

.civ-team-grid {
	list-style: none;
	margin: var(--civ-lg) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--civ-md);
}

.civ-team-card { margin: 0; outline: none; }

.civ-team-card:focus-visible { outline: 2px solid var(--civ-accent); outline-offset: 6px; }

.civ-team-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--civ-radius-md);
	background: var(--civ-ink);
}

.civ-team-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.civ-team-photo-a {
	filter: grayscale(1) contrast(1.05);
	opacity: 1;
	transition: opacity 300ms ease;
}

.civ-team-photo-b {
	opacity: 0;
	transition: opacity 300ms ease;
}

.civ-team-card:hover .civ-team-photo-a,
.civ-team-card:focus-visible .civ-team-photo-a,
.civ-team-card:focus-within .civ-team-photo-a { opacity: 0; }

.civ-team-card:hover .civ-team-photo-b,
.civ-team-card:focus-visible .civ-team-photo-b,
.civ-team-card:focus-within .civ-team-photo-b { opacity: 1; }

.civ-team-meta { padding-top: 14px; }

body .civ-team-name {
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.25;
	letter-spacing: 0.005em;
	color: var(--civ-ink);
	margin: 0;
}

body .civ-team-role {
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 0.9rem;
	line-height: 1.4;
	color: rgba(58, 58, 58, 0.78);
	margin: 3px 0 0;
	max-width: none;
}

body .civ-team-line {
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 0.88rem;
	line-height: 1.45;
	color: rgba(58, 58, 58, 0.7);
	margin: 8px 0 0;
	max-width: none;
}

.civ-team-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.85rem;
	color: var(--civ-deep);
	border-bottom: 1px solid rgba(45, 97, 135, 0.4);
	text-decoration: none;
}

.civ-team-link:hover { border-bottom-color: var(--civ-accent); }

@media (max-width: 900px) {
	.civ-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--civ-sm); }
}

/* Na dodir nema hovera: odmah prikazi fotografiju u boji. */
@media (hover: none) {
	.civ-team-photo-a { opacity: 0; }
	.civ-team-photo-b { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.civ-team-photo-a, .civ-team-photo-b { transition: none; }
}

/* Zatvara belu sekciju tima pre bele logo trake. */
.civ-team { border-bottom: 1px solid var(--civ-rule-light); }

/* ---- Konsultacije (5.11) ----
   Namerno manja i tisa od full-service bloka. Uzi tekstualni blok, manja
   fotografija, i sekundarno dugme umesto narandzastog, da pojedinacna usluga
   ne bi nadjacala kompletno vodjenje mreza. */

.civ-cons-row { gap: var(--civ-lg); align-items: center; }

.civ-cons-text { flex: 1 1 58%; min-width: 0; }

body .civ-cons-h2 .elementor-heading-title {
	font-family: var(--civ-font-heading);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.12;
	color: var(--civ-ink);
	margin: 0 0 16px;
	max-width: 24ch;
}

body .civ-cons-body,
body .civ-cons-body p {
	color: rgba(58, 58, 58, 0.88);
	max-width: 54ch;
	margin: 0;
}

.civ-cons-cta { margin-top: 22px; }

body .civ-cons-cta .elementor-button {
	background-color: transparent;
	color: var(--civ-ink);
	border: 1px solid rgba(58, 58, 58, 0.45);
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.94rem;
	padding: 13px 24px;
	border-radius: var(--civ-radius-sm);
	box-shadow: none;
	transition: border-color 160ms ease, background-color 160ms ease;
}

body .civ-cons-cta .elementor-button:hover,
body .civ-cons-cta .elementor-button:focus-visible {
	border-color: var(--civ-ink);
	background-color: rgba(255, 255, 255, 0.5);
	color: var(--civ-ink);
}

.civ-cons-visual { flex: 1 1 34%; min-width: 0; }

.civ-cons-photo img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: center 25%;
	border-radius: var(--civ-radius-md);
	display: block;
}

@media (max-width: 900px) {
	.civ-cons-row { flex-direction: column; align-items: flex-start; }
	.civ-cons-text, .civ-cons-visual { flex: 1 1 100%; width: 100%; }
	.civ-cons-photo img { height: 240px; }
}

/* ---- O nama i zavrsni CTA (5.12) ---- */

.civ-about .e-con-inner { gap: var(--civ-lg); }

.civ-about-top { gap: var(--civ-lg); align-items: center; }

.civ-about-text { flex: 1 1 56%; min-width: 0; }

body .civ-about-h2 .elementor-heading-title {
	font-family: var(--civ-font-heading);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.12;
	color: #FFFFFF;
	margin: 0 0 16px;
}

body .civ-about-body,
body .civ-about-body p {
	color: #FFFFFF;
	font-weight: 400;
	max-width: 56ch;
	margin: 0;
}

.civ-about-visual { flex: 1 1 38%; min-width: 0; position: relative; }

.civ-about-photo img {
	width: 100%;
	height: 340px;
	object-fit: cover;
	object-position: center 22%;
	border-radius: var(--civ-radius-md);
	display: block;
}

.civ-about-close {
	width: 100%;
	border-top: 1px solid var(--civ-rule-dark);
	padding-top: var(--civ-lg);
	gap: 0;
}

body .civ-about-big .elementor-heading-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 5.2vw, 4rem);
	line-height: 0.99;
	letter-spacing: -0.03em;
	color: #FFFFFF;
	margin: 0 0 20px;
	max-width: 17ch;
}

body .civ-about-final,
body .civ-about-final p {
	color: #FFFFFF;
	font-weight: 400;
	max-width: 58ch;
	margin: 0;
}

.civ-about-cta { margin-top: 26px; }

@media (max-width: 1024px) {
	.civ-about-top { flex-direction: column; align-items: flex-start; }
	.civ-about-text, .civ-about-visual { flex: 1 1 100%; width: 100%; }
	.civ-about-photo img { height: 280px; }
}

@media (max-width: 640px) {
	.civ-about-photo img { height: 240px; }
	.civ-about-cta .elementor-button,
	.civ-cons-cta .elementor-button { width: 100%; text-align: center; }
}

/* ---- Kontakt forma (poglavlje 08) ---- */

.civ-contact-row { gap: var(--civ-lg); align-items: flex-start; }

.civ-contact-intro { flex: 1 1 38%; min-width: 0; }

body .civ-contact-h2 .elementor-heading-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(1.8rem, 3.2vw, 2.8rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--civ-ink);
	margin: 0 0 18px;
	max-width: 18ch;
}

body .civ-contact-body,
body .civ-contact-body p {
	color: rgba(58, 58, 58, 0.86);
	max-width: 44ch;
	margin: 0;
}

.civ-contact-form { flex: 1 1 56%; min-width: 0; }

.civ-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.civ-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--civ-sm) var(--civ-md);
}

.civ-field { margin: 0 0 var(--civ-sm); max-width: none; }

.civ-field-wide { grid-column: 1 / -1; }

.civ-field label,
.civ-fieldset legend {
	display: block;
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	color: var(--civ-ink);
	margin-bottom: 6px;
	padding: 0;
}

.civ-field input,
.civ-field select,
.civ-field textarea {
	width: 100%;
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 1rem;
	color: var(--civ-ink);
	background: #FFFFFF;
	border: 1px solid rgba(58, 58, 58, 0.28);
	border-radius: var(--civ-radius-sm);
	padding: 12px 14px;
	transition: border-color 160ms ease;
}

.civ-field textarea { resize: vertical; min-height: 130px; }

.civ-field input:focus,
.civ-field select:focus,
.civ-field textarea:focus { border-color: var(--civ-deep); }

.civ-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 var(--civ-sm);
}

.civ-checks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px var(--civ-sm);
	margin-top: 4px;
}

.civ-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 0.92rem;
	line-height: 1.35;
	color: var(--civ-ink);
	margin: 0;
	cursor: pointer;
}

.civ-check input {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	margin-top: 1px;
	accent-color: var(--civ-deep);
}

.civ-consent { margin-top: 4px; }

.civ-consent .civ-check { font-size: 0.88rem; color: rgba(58, 58, 58, 0.84); }

.civ-error input,
.civ-error select,
.civ-error textarea { border-color: #B3261E; }

.civ-error legend,
.civ-error > label { color: #B3261E; }

.civ-form-actions { margin: var(--civ-sm) 0 0; }

.civ-form-submit {
	background: var(--civ-accent);
	color: var(--civ-ink);
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.96rem;
	padding: 15px 30px;
	border: 0;
	border-radius: var(--civ-radius-sm);
	cursor: pointer;
	transition: background-color 160ms ease, transform 160ms ease;
}

.civ-form-submit:hover:not(:disabled) { background: #F59440; transform: translateY(-1px); }

.civ-form-submit:disabled { opacity: 0.6; cursor: progress; }

.civ-form-status {
	margin: var(--civ-sm) 0 0;
	font-size: 0.94rem;
	max-width: none;
	min-height: 1.4em;
}

.civ-form-status.is-ok { color: #1B6B3A; font-weight: 600; }

.civ-form-status.is-error { color: #B3261E; font-weight: 600; }

@media (max-width: 1024px) {
	.civ-contact-row { flex-direction: column; }
	.civ-contact-intro, .civ-contact-form { flex: 1 1 100%; width: 100%; }
	body .civ-contact-body p { max-width: 56ch; }
}

@media (max-width: 767px) {
	.civ-form-grid { grid-template-columns: 1fr; }
	.civ-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.civ-form-submit { width: 100%; }
}

@media (max-width: 460px) {
	.civ-checks { grid-template-columns: 1fr; }
}

/* Uputstvo trazi da opcija Paket vise usluga bude uocljivija od ostalih. */
.civ-check:has(input[value="paket"]) {
	font-weight: 600;
	color: var(--civ-deep);
}

.civ-newsletter { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--civ-rule-light); }

.civ-newsletter .civ-check { font-size: 0.88rem; color: rgba(58, 58, 58, 0.84); }

.civ-form-note { display: block; margin-top: 4px; font-weight: 300; color: rgba(58, 58, 58, 0.8); }

/* Linkovi na karticama tima. Najvise dva po osobi, da kartica ostane mirna. */
.civ-team-links { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.civ-team-links li { margin: 0; }
.civ-team-links .civ-team-link { margin-top: 0; font-size: 0.82rem; color: rgba(58, 58, 58, 0.7); border-bottom-color: rgba(58, 58, 58, 0.25); }
.civ-team-links .civ-team-link:hover { color: var(--civ-deep); border-bottom-color: var(--civ-accent); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Ikonice mreza. Dodirna povrsina je 34px, iznad WCAG minimuma od 24px. */
.civ-icon { display: block; width: 18px; height: 18px; }

.civ-team-links { gap: 4px; }

.civ-team-links .civ-team-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(58, 58, 58, 0.2);
	border-radius: var(--civ-radius-sm);
	color: rgba(58, 58, 58, 0.75);
	transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.civ-team-links .civ-team-link:hover,
.civ-team-links .civ-team-link:focus-visible {
	color: var(--civ-deep);
	border-color: var(--civ-deep);
	background-color: rgba(45, 97, 135, 0.06);
}

.civ-footer-social { gap: 10px; }

.civ-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--civ-rule-dark);
	border-radius: var(--civ-radius-sm);
	color: #FFFFFF;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.civ-footer-social a:hover,
.civ-footer-social a:focus-visible {
	border-color: var(--civ-accent);
	background-color: rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
}

/* ---- Blog arhiva, objava i 404 ---- */

.civ-blog-inner,
.civ-single-inner,
.civ-404-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--civ-xl) 24px;
}

.civ-blog-head { max-width: 30ch; margin-bottom: var(--civ-lg); }

.civ-blog-title,
.civ-single-title {
	font-family: var(--civ-font-heading);
	font-weight: 400;
	line-height: 1.06;
	color: var(--civ-ink);
	margin: 0 0 16px;
}

.civ-blog-title { font-size: clamp(2rem, 3.6vw, 3rem); }

.civ-blog-lede {
	color: rgba(58, 58, 58, 0.82);
	max-width: 56ch;
	margin: 0;
}

/* Mreza objava */
.civ-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--civ-lg) var(--civ-md);
	border-top: 1px solid var(--civ-rule-light);
	padding-top: var(--civ-md);
}

.civ-post-card { margin: 0; }

.civ-post-link { display: block; text-decoration: none; color: inherit; }

.civ-post-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--civ-radius-md);
	background: var(--civ-surface);
	margin-bottom: 14px;
}

.civ-post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}

.civ-post-link:hover .civ-post-thumb img { transform: scale(1.03); }

.civ-post-cat,
a.civ-post-cat {
	display: inline-block;
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--civ-deep);
	text-decoration: none;
	margin-bottom: 8px;
}

.civ-post-title {
	display: block;
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 1.12rem;
	line-height: 1.3;
	color: var(--civ-ink);
	margin-bottom: 8px;
}

.civ-post-link:hover .civ-post-title { color: var(--civ-deep); }

.civ-post-excerpt {
	display: block;
	font-weight: 300;
	font-size: 0.94rem;
	line-height: 1.5;
	color: rgba(58, 58, 58, 0.8);
	margin-bottom: 10px;
}

.civ-post-date {
	display: block;
	font-size: 0.8rem;
	color: rgba(58, 58, 58, 0.6);
}

/* Prazan blog */
.civ-blog-empty {
	border-top: 1px solid var(--civ-rule-light);
	padding-top: var(--civ-lg);
	max-width: 52ch;
}

.civ-blog-empty-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--civ-ink);
	margin: 0 0 12px;
}

.civ-blog-empty-text { color: rgba(58, 58, 58, 0.82); margin: 0 0 24px; }

/* Paginacija */
.civ-blog .pagination,
.civ-blog .navigation {
	margin-top: var(--civ-lg);
	padding-top: var(--civ-md);
	border-top: 1px solid var(--civ-rule-light);
}

.civ-blog .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }

.civ-blog .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--civ-rule-light);
	border-radius: var(--civ-radius-sm);
	font-size: 0.92rem;
	color: var(--civ-ink);
	text-decoration: none;
}

.civ-blog .page-numbers.current,
.civ-blog .page-numbers:hover { border-color: var(--civ-deep); color: var(--civ-deep); }

/* Pojedinacna objava */
.civ-single-inner { max-width: 860px; }

.civ-single-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }

.civ-single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 0.86rem;
	color: rgba(58, 58, 58, 0.65);
	margin: 0 0 var(--civ-md);
	max-width: none;
}

.civ-single-thumb {
	margin: 0 0 var(--civ-md);
	border-radius: var(--civ-radius-md);
	overflow: hidden;
}

.civ-single-thumb img { width: 100%; height: auto; display: block; }

/* Tipografija sadrzaja objave */
.civ-entry { font-size: 1.05rem; line-height: 1.7; color: var(--civ-ink); }

.civ-entry > * { max-width: 68ch; }

.civ-entry p { margin: 0 0 1.15em; max-width: 68ch; }

.civ-entry h2 {
	font-family: var(--civ-font-heading);
	font-size: clamp(1.5rem, 2.4vw, 1.95rem);
	line-height: 1.15;
	margin: 1.8em 0 0.5em;
	color: var(--civ-ink);
}

.civ-entry h3 {
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 1.5em 0 0.4em;
	color: var(--civ-ink);
}

.civ-entry ul,
.civ-entry ol { margin: 0 0 1.15em; padding-left: 1.1em; }

.civ-entry li { margin-bottom: 0.4em; }

.civ-entry ul { list-style: none; padding-left: 0; }

.civ-entry ul li { display: flex; align-items: baseline; gap: 12px; }

.civ-entry ul li::before {
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 1px;
	background: var(--civ-sky);
	transform: translateY(-2px);
}

.civ-entry a { color: var(--civ-deep); text-decoration: underline; text-underline-offset: 3px; }

.civ-entry a:hover { color: var(--civ-ink); }

.civ-entry blockquote {
	margin: 1.6em 0;
	padding: 0 0 0 var(--civ-md);
	border-left: 2px solid var(--civ-accent);
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--civ-ink);
}

.civ-entry blockquote p { margin-bottom: 0.5em; }

.civ-entry img {
	max-width: 100%;
	height: auto;
	border-radius: var(--civ-radius-md);
	display: block;
	margin: 1.6em 0;
}

.civ-entry figcaption {
	font-size: 0.85rem;
	color: rgba(58, 58, 58, 0.65);
	margin-top: -1em;
	margin-bottom: 1.6em;
}

.civ-single-foot {
	margin-top: var(--civ-lg);
	padding-top: var(--civ-md);
	border-top: 1px solid var(--civ-rule-light);
}

.civ-single-back {
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.94rem;
	color: var(--civ-deep);
	text-decoration: none;
	border-bottom: 1px solid rgba(45, 97, 135, 0.35);
}

.civ-single-back:hover { border-bottom-color: var(--civ-accent); }

/* CTA ispod objave */
.civ-single-cta { background: var(--civ-deep); color: #FFFFFF; }

.civ-single-cta-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--civ-xl) 24px;
}

.civ-single-cta-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: #FFFFFF;
	margin: 0 0 12px;
	max-width: 18ch;
}

.civ-single-cta-text { color: #FFFFFF; font-weight: 400; margin: 0 0 24px; max-width: 52ch; }

/* 404 */
.civ-404 { background: var(--civ-deep); color: #FFFFFF; }

.civ-404-inner { max-width: 860px; text-align: left; }

.civ-404-code {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(4rem, 12vw, 9rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, 0.16);
	margin: 0 0 8px;
	max-width: none;
}

.civ-404-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(1.8rem, 4vw, 3rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: #FFFFFF;
	margin: 0 0 16px;
}

.civ-404-text { color: #FFFFFF; font-weight: 400; max-width: 52ch; margin: 0 0 28px; }

.civ-404-actions { display: flex; flex-wrap: wrap; gap: 14px; max-width: none; margin: 0; }

.civ-btn-ghost {
	display: inline-block;
	background: transparent;
	color: #FFFFFF;
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.94rem;
	padding: 13px 24px;
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: var(--civ-radius-sm);
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.civ-btn-ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }

@media (max-width: 1024px) {
	.civ-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.civ-blog-inner, .civ-single-inner, .civ-404-inner, .civ-single-cta-inner { padding: var(--civ-lg) 16px; }
	.civ-post-grid { grid-template-columns: 1fr; gap: var(--civ-md); }
	.civ-404-actions .civ-btn-primary, .civ-404-actions .civ-btn-ghost { width: 100%; text-align: center; }
}

/* ---- Footer: doterivanje ---- */

.civ-footer { padding-block: calc(var(--civ-xl) + 16px) var(--civ-md); }

.civ-footer-inner {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--civ-xl);
	padding-bottom: var(--civ-lg);
}

.civ-footer .custom-logo { height: 40px; }

.civ-footer-claim {
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
	max-width: 30ch;
	margin-top: 18px;
}

/* Oznake kolona, da footer ima strukturu a ne tri gomile linkova */
.civ-footer-label {
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--civ-rule-dark);
	max-width: none;
}

.civ-footer-nav ul { gap: 12px var(--civ-md); }

.civ-footer-nav a { font-size: 0.96rem; color: rgba(255, 255, 255, 0.88); }

.civ-footer-nav a:hover,
.civ-footer-nav a:focus-visible { color: #FFFFFF; border-bottom-color: var(--civ-accent); }

.civ-footer-nav li.civalska-cta { margin-top: 18px; }

.civ-footer-contact { gap: 10px; }

.civ-footer-line { font-size: 1rem; border-bottom-color: rgba(255, 255, 255, 0.28); }

.civ-footer-address {
	font-size: 0.94rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
	margin: 4px 0 0;
	max-width: 24ch;
}

.civ-footer-social { margin-top: 18px; gap: 8px; }

.civ-footer-legal {
	margin-top: 0;
	padding-top: var(--civ-md);
	align-items: baseline;
}

.civ-footer-legal-text { gap: 4px 22px; font-size: 0.82rem; }

.civ-footer-pib { font-size: 0.82rem; }

.civ-footer-copy { font-size: 0.82rem; }

@media (max-width: 900px) {
	.civ-footer { padding-block: var(--civ-lg) var(--civ-md); }
	.civ-footer-inner { grid-template-columns: 1fr; gap: var(--civ-lg); padding-bottom: var(--civ-md); }
	.civ-footer-claim { max-width: 40ch; }
}

/* ---- Mobilni meni (2.3) ---- */

.site-navigation-toggle-holder { padding: 0; }

body .site-navigation-toggle-holder .site-navigation-toggle {
	width: 44px;
	height: 44px;
	padding: 0;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--civ-radius-sm);
	color: #FFFFFF;
	transition: border-color 160ms ease, background-color 160ms ease;
}

body .site-navigation-toggle-holder .site-navigation-toggle:hover,
body .site-navigation-toggle-holder .site-navigation-toggle[aria-expanded="true"] {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: #FFFFFF;
}

/* Panel preko celog ekrana, ne uska padajuca lista */
body .site-navigation-dropdown {
	background: var(--civ-deep);
	border-top: 1px solid var(--civ-rule-dark);
	box-shadow: none;
	max-height: calc(100vh - 72px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

body .site-navigation-dropdown .menu {
	padding: var(--civ-md) 24px calc(var(--civ-md) + env(safe-area-inset-bottom));
	margin: 0;
	max-width: 1280px;
	margin-inline: auto;
}

body .site-navigation-dropdown .menu li { border: 0; }

body .site-navigation-dropdown .menu li a {
	display: block;
	font-family: var(--civ-font-heading);
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: 0;
	color: #FFFFFF;
	padding: 14px 0;
	border-bottom: 1px solid var(--civ-rule-dark);
	text-align: left;
}

body .site-navigation-dropdown .menu li a:hover,
body .site-navigation-dropdown .menu li a:focus-visible { color: var(--civ-surface); }

body .site-navigation-dropdown .menu li a::after { content: none; }

/* CTA je puno dugme preko cele sirine, kako trazi 2.3 */
body .site-navigation-dropdown .menu li.civalska-cta { margin-top: var(--civ-md); }

body .site-navigation-dropdown .menu li.civalska-cta a {
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 1rem;
	background: var(--civ-accent);
	color: var(--civ-ink);
	border: 0;
	border-radius: var(--civ-radius-sm);
	padding: 16px 24px;
	text-align: center;
}

body .site-navigation-dropdown .menu li.civalska-cta a:hover { background: #F59440; color: var(--civ-ink); }

/* ---- Sve usluge: ozivljavanje reda ----
   Sekcija mora da ostane tisa od full-service bloka, pa zivot dolazi iz
   interakcije i tipografije, ne iz boje i tezine. Red se ne ponasa kao link
   jer nigde ne vodi, pa nema pokazivaca ruke ni podvlacenja. */

.civ-serv-list ul { counter-reset: civserv; }

body .civ-serv-list li {
	grid-template-columns: minmax(210px, 0.34fr) minmax(0, 0.66fr);
	gap: var(--civ-sm) var(--civ-lg);
	align-items: start;
	padding: 24px 18px 24px 2.9rem;
	position: relative;
	counter-increment: civserv;
	transition: background-color 220ms ease, padding-left 220ms ease;
}

/* Traka sa leve strane koja izraste na hover */
body .civ-serv-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: -1px;
	bottom: -1px;
	width: 3px;
	background: var(--civ-sky);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 260ms ease;
}

body .civ-serv-list li:hover { background-color: rgba(45, 97, 135, 0.045); padding-left: 18px; }

body .civ-serv-list li:hover::before { transform: scaleY(1); }

/* Redni broj kao tiha oznaka, ne kao ukras */
body .civ-serv-list li .civ-serv-index {
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: rgba(58, 58, 58, 0.4);
	padding-top: 4px;
	transition: color 220ms ease;
}

body .civ-serv-list li:hover .civ-serv-index { color: var(--civ-deep); }

body .civ-serv-list li .civ-serv-index::before { content: counter(civserv, decimal-leading-zero); }

body .civ-serv-list li .civ-serv-name {
	font-size: 1.14rem;
	transition: color 220ms ease, transform 260ms ease;
}

body .civ-serv-list li:hover .civ-serv-name { color: var(--civ-deep); }

body .civ-serv-list li .civ-serv-desc { transition: color 220ms ease; }

body .civ-serv-list li:hover .civ-serv-desc { color: var(--civ-ink); }

/* Ulazak u vidno polje, bez JavaScript-a. Browseri koji ovo ne podrzavaju
   prikazuju sekciju normalno, bez animacije. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .civ-serv-list li {
			opacity: 0;
			animation: civ-serv-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}

@keyframes civ-serv-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}



/* civ-serv-breath: naziv usluge mora imati dovoljno sirine da se ne lomi
   rec po rec, a opis svoju meru da se ne rasteze preko celog reda. */
body .civ-serv-list li .civ-serv-name,
body .civ-serv-list li .civ-serv-desc {
	min-width: 0;
	overflow-wrap: break-word;
}

body .civ-serv-list li .civ-serv-name {
	line-height: 1.3;
	padding-top: 1px;
}

body .civ-serv-list li .civ-serv-desc {
	line-height: 1.55;
	max-width: 58ch;
}

/* Tablet: tri kolone su preuske, pa se lomi na dva reda ranije nego pre. */


/* civ-serv-counter: redni broj se crta iz CSS brojaca, ne iz markupa.
   Elementor cisti prazne span elemente pri regenerisanju, pa bi svako
   resenje koje zavisi od dodatnog elementa pre ili kasnije nestalo. */
body .civ-serv-list li::after {
	content: counter(civserv, decimal-leading-zero);
	position: absolute;
	left: 14px;
	top: 26px;
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	color: rgba(58, 58, 58, 0.38);
	transition: color 220ms ease;
}

body .civ-serv-list li:hover::after { color: var(--civ-deep); }

body .civ-serv-list li:hover { padding-left: 3.3rem; }

@media (max-width: 980px) {
	body .civ-serv-list li {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
		padding: 20px 0 20px 2.6rem;
	}
	body .civ-serv-list li:hover { padding-left: 2.6rem; background-color: transparent; }
	body .civ-serv-list li::after { left: 0; top: 22px; }
	body .civ-serv-list li::before { display: none; }
}

/* ---- Footer: drugo doterivanje ---- */

.civ-footer {
	border-top: 3px solid var(--civ-accent);
	padding-block: calc(var(--civ-xl) + 24px) var(--civ-md);
}

.civ-footer-inner {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--civ-xl);
	padding-bottom: calc(var(--civ-lg) + 8px);
}

.civ-footer .custom-logo { height: 56px; }

.civ-footer-claim {
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 1.08rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.88);
	max-width: 26ch;
	margin-top: 22px;
}

.civ-footer-label { margin-bottom: 18px; }

.civ-footer-nav ul { gap: 13px var(--civ-md); }

.civ-footer-contact { gap: 12px; }

.civ-footer-line { font-size: 1.02rem; }

.civ-footer-social { margin-top: 22px; }

/* Donji red: pravni podaci levo, linkovi i copyright desno */
.civ-footer-legal {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: start;
	gap: var(--civ-md) var(--civ-lg);
	padding-top: calc(var(--civ-md) + 4px);
}

.civ-footer-legal-text {
	flex-direction: column;
	gap: 5px;
	line-height: 1.5;
}

.civ-footer-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	justify-content: flex-end;
	grid-column: 2;
}

.civ-footer-legal-link {
	font-family: var(--civ-font-body);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	transition: color 160ms ease, border-color 160ms ease;
}

.civ-footer-legal-link:hover,
.civ-footer-legal-link:focus-visible {
	color: #FFFFFF;
	border-bottom-color: var(--civ-accent);
}

.civ-footer-copy {
	grid-column: 2;
	text-align: right;
	color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 900px) {
	.civ-footer { padding-block: var(--civ-lg) var(--civ-md); }
	.civ-footer .custom-logo { height: 46px; }
	.civ-footer-claim { max-width: 40ch; font-size: 1rem; }
	.civ-footer-legal { grid-template-columns: 1fr; gap: var(--civ-sm); }
	.civ-footer-meta { justify-content: flex-start; grid-column: 1; }
	.civ-footer-copy { grid-column: 1; text-align: left; }
}

/* ---- Podaci firme u brend koloni ----
   Odvojeni od recenice razmakom i tankom linijom, u istom fontu ali sitnije
   i prigusenije, da budu dostupni a ne da se takmice sa porukom iznad. */

.civ-footer-claim { margin-bottom: 0; }

.civ-footer-company {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--civ-rule-dark);
	max-width: 36ch;
}

.civ-footer-company p {
	font-family: var(--civ-font-body);
	max-width: none;
}

.civ-footer-company-name {
	font-weight: 600;
	font-size: 0.78rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 10px;
}

.civ-footer-company-line {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 20px;
	font-weight: 300;
	font-size: 0.82rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.66);
	margin: 0 0 2px;
}

/* Donji red nosi samo copyright. */
.civ-footer-legal {
	grid-template-columns: 1fr;
	padding-top: var(--civ-md);
}

.civ-footer-copy { grid-column: 1; text-align: left; }

/* ---- Footer: usklađivanje tri kolone ----
   Sve tri kolone dele isti ritam: oznaka sa linijom preko cele sirine,
   glavni sadrzaj, pa tanka linija i ispod nje sitni prigusen podatak.
   Brend kolona ima podatke firme, kontakt kolona adresu. */

.civ-footer-label {
	display: block;
	width: 100%;
	align-self: stretch;
	margin: 0 0 20px;
	padding-bottom: 12px;
}

/* Navigacija */
.civ-footer-nav ul { gap: 14px var(--civ-md); }

.civ-footer-nav a {
	font-size: 0.94rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

.civ-footer-nav li.civalska-cta { margin-top: 26px; }

.civ-footer-nav li.civalska-cta a { font-size: 0.94rem; padding: 13px 22px; }

/* Kontakt */
.civ-footer-contact { gap: 11px; align-items: stretch; }

.civ-footer-line {
	align-self: flex-start;
	font-size: 0.94rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
	border-bottom-color: rgba(255, 255, 255, 0.26);
}

.civ-footer-line:hover { color: #FFFFFF; }

/* Adresa dobija isti tretman kao podaci firme u levoj koloni */
.civ-footer-address {
	margin-top: 19px;
	padding-top: 22px;
	border-top: 1px solid var(--civ-rule-dark);
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 0.82rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.66);
	max-width: 26ch;
}

.civ-footer-social { margin-top: 22px; gap: 8px; }

.civ-footer-social a { width: 34px; height: 34px; }

/* Brend kolona: isti razmak ispod oznake kao kod ostalih */
.civ-footer-claim { margin-top: 20px; }

.civ-footer-company { margin-top: 26px; padding-top: 22px; }

@media (max-width: 900px) {
	.civ-footer-label { margin-bottom: 16px; }
	.civ-footer-address { max-width: 40ch; }
	.civ-footer-nav li.civalska-cta { margin-top: 20px; }
}

/* ---- civ-footer-balance: izjednacavanje visine kolona ----
   Brend kolona je posle dodavanja podataka firme postala znatno visa od
   ostale dve, pa je desna trecina podnozja ostajala prazna. Navigacija
   ide u jednu kolonu, cime dobija sedam redova umesto tri. */

.civ-footer-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr) minmax(0, 0.9fr); gap: var(--civ-lg); }

.civ-footer-nav ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }

.civ-footer-nav li.civalska-cta { grid-column: 1; margin-top: 22px; }

.civ-footer-nav li.civalska-cta a { display: block; text-align: center; }

@media (max-width: 900px) {
	.civ-footer-inner { grid-template-columns: 1fr; }
	.civ-footer-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.civ-footer-nav li.civalska-cta { grid-column: 1 / -1; }
	.civ-footer-nav li.civalska-cta a { display: inline-block; }
}

/* Uvod u ikonice mreza. Isti tretman kao podaci firme u levoj koloni:
   tanka linija iznad, pa sitan prigusen tekst. */
.civ-footer-social-note {
	margin: 19px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--civ-rule-dark);
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 0.82rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.66);
	max-width: 26ch;
}

.civ-footer-social { margin-top: 14px; }

/* ---- Izabrani radovi (7.2) ----
   Mreza kartica sa pravom fotografijom. Struktura je namerno drugacija od
   mreze blog objava: metapodaci stoje iznad naslova, a rezultat je istaknut. */

body .civ-work-h2 .elementor-heading-title {
	font-family: var(--civ-font-display);
	font-weight: 800;
	font-size: clamp(1.8rem, 3.4vw, 3rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: #FFFFFF;
	margin: 0 0 18px;
	max-width: 20ch;
}

body .civ-work-lede,
body .civ-work-lede p {
	color: #FFFFFF;
	font-weight: 400;
	max-width: 56ch;
	margin: 0;
}

.civ-work-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--civ-md);
	margin-top: var(--civ-lg);
	width: 100%;
}

.civ-work-card { margin: 0; }

.civ-work-link { display: block; text-decoration: none; color: inherit; }

.civ-work-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--civ-radius-md);
	background: rgba(255, 255, 255, 0.08);
	margin-bottom: 16px;
}

.civ-work-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 420ms ease;
}

.civ-work-link:hover .civ-work-thumb img { transform: scale(1.03); }

.civ-work-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--civ-surface);
	margin-bottom: 10px;
}

.civ-work-title {
	display: block;
	font-family: var(--civ-font-heading);
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	line-height: 1.2;
	color: #FFFFFF;
	margin-bottom: 8px;
}

.civ-work-link:hover .civ-work-title { color: var(--civ-surface); }

.civ-work-result {
	display: block;
	font-family: var(--civ-font-body);
	font-weight: 300;
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

/* Slike unutar teksta objave i rada */
.civ-figure { margin: 1.8em 0; max-width: 100%; }

.civ-figure img {
	max-width: 340px;
	width: 100%;
	height: auto;
	border-radius: var(--civ-radius-md);
	display: block;
	margin: 0;
}

.civ-figure figcaption {
	margin-top: 10px;
	font-size: 0.84rem;
	line-height: 1.5;
	color: rgba(58, 58, 58, 0.66);
	max-width: 44ch;
}

@media (max-width: 1024px) {
	.civ-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.civ-work-grid { grid-template-columns: 1fr; gap: var(--civ-md); }
	.civ-figure img { max-width: 100%; }
}

/* ---- civ-header-inner-pages ----
   Linkovi u zaglavlju su beli jer stoje preko tamnoplavog heroja na
   naslovnoj. Na svim ostalim stranicama podloga je bela, pa bi meni bio
   nevidljiv. Zato tamo zaglavlje odmah nosi tamnoplavu podlogu, istu koju
   na naslovnoj dobija pri skrolovanju. */

body:not(.home) .site-header {
	background: var(--civ-deep);
	border-bottom-color: var(--civ-rule-dark);
}

/* Na 404 stranici je podloga ista boja, pa linija razdvaja zaglavlje. */
body.error404 .site-header { border-bottom-color: var(--civ-rule-dark); }

/* ---- civ-btn-standalone ----
   Primarno dugme mora da radi i van Elementora, jer ga koriste sabloni teme:
   zavrsni CTA ispod objave, prazno stanje bloga i 404 stranica. Do sada je
   pravilo bilo vezano samo za Elementor widget wrapper, pa je u sablonima
   ostajala gola veza. */

a.civ-btn-primary,
.civ-blog-empty a.civ-btn-primary,
.civ-single-cta a.civ-btn-primary,
.civ-404-actions a.civ-btn-primary {
	display: inline-block;
	background: var(--civ-accent);
	color: var(--civ-ink);
	font-family: var(--civ-font-body);
	font-weight: 600;
	font-size: 0.96rem;
	letter-spacing: 0.01em;
	padding: 15px 28px;
	border: 0;
	border-radius: var(--civ-radius-sm);
	box-shadow: none;
	text-decoration: none;
	transition: background-color 160ms ease, transform 160ms ease;
}

a.civ-btn-primary:hover,
a.civ-btn-primary:focus-visible {
	background: #F59440;
	color: var(--civ-ink);
	transform: translateY(-1px);
}

/* Hello Elementor ogranicava .site-main za sablone koje ne gradi Elementor.
   Nasi sabloni sami vode svoju sirinu kroz unutrasnje kontejnere. */
body .site-main {
	max-width: 100%;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

/* ---- Zavrsni CTA ispod objave ---- */

.civ-single-cta {
	background: var(--civ-deep);
	color: #FFFFFF;
	margin-top: var(--civ-xl);
}

.civ-single-cta-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--civ-lg) 24px;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) auto;
	align-items: center;
	gap: var(--civ-md) var(--civ-lg);
}

.civ-single-cta-title {
	grid-column: 1;
	grid-row: 1;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.05;
	margin: 0 0 10px;
	max-width: 24ch;
}

.civ-single-cta-text {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	max-width: 54ch;
	color: rgba(255, 255, 255, 0.86);
	font-weight: 300;
}

.civ-single-cta a.civ-btn-primary {
	grid-column: 2;
	grid-row: 1 / 3;
	justify-self: end;
	white-space: nowrap;
}

@media (max-width: 860px) {
	.civ-single-cta-inner {
		grid-template-columns: 1fr;
		gap: var(--civ-sm);
		padding: var(--civ-md) 16px calc(var(--civ-md) + 6px);
	}
	.civ-single-cta-title,
	.civ-single-cta-text { grid-column: 1; }
	.civ-single-cta-title { grid-row: 1; }
	.civ-single-cta-text { grid-row: 2; }
	.civ-single-cta a.civ-btn-primary {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
		margin-top: 8px;
	}
}


/* ---- civ-logo-raster ----
   Logotip je PNG od 2560x852, dakle odnos 3:1. Visina se vodi u CSS-u,
   sirina se racuna sama. Na ovoj rezoluciji je ostar i na retina ekranu. */

body .site-header .custom-logo {
	height: 34px;
	width: auto;
	max-width: none;
}

body .civ-footer .custom-logo {
	height: 46px;
	width: auto;
	max-width: none;
}

body .site-header .custom-logo-link,
body .civ-footer .custom-logo-link { display: inline-block; line-height: 0; }

@media (max-width: 640px) {
	body .site-header .custom-logo { height: 28px; }
	body .civ-footer .custom-logo { height: 38px; }
}

/* ---- civ-full-photo-graphic ----
   U full-service sekciji sada stoji grafik, ne fotografija. Fotografija
   sme da se kropuje jer je motiv sredisnji, ali grafik gubi smisao ako mu
   se odsece ivica. Zato visina ide po sadrzaju, a odnos stranica se cuva. */

body .civ-full-photo img {
	height: auto;
	max-height: 420px;
	object-fit: contain;
	object-position: center;
}

body .civ-full-visual { align-self: center; }

@media (max-width: 1024px) {
	body .civ-full-photo img { max-height: 320px; }
}

@media (max-width: 767px) {
	body .civ-full-photo img { max-height: 260px; }
}

/* ---- civ-mobile-measure ----
   Mera reda u karakterima cuva citljivost dok je ekran siri od nje. Na
   telefonu je viewport vec uzi od zadate mere, pa ista pravila samo prelamaju
   tekst prerano i ostavljaju prazninu sa desne strane. Zato se na uskim
   ekranima sva ogranicenja pustaju, a bocni razmak se blago povecava. */

@media (max-width: 767px) {

	/* Bocni razmak sekcija */
	body .civ-hero > .e-con-inner,
	body .civ-trust > .e-con-inner,
	body .civ-problem > .e-con-inner,
	body .civ-statement > .e-con-inner,
	body .civ-full > .e-con-inner,
	body .civ-serv > .e-con-inner,
	body .civ-proc > .e-con-inner,
	body .civ-work > .e-con-inner,
	body .civ-team > .e-con-inner,
	body .civ-logos > .e-con-inner,
	body .civ-cons > .e-con-inner,
	body .civ-about > .e-con-inner,
	body .civ-contact > .e-con-inner { padding-inline: 4px; }

	/* Sva ogranicenja mere se puštaju */
	body .civ-hero-h1,
	body .civ-hero-h1 .elementor-heading-title,
	body .civ-hero-sub .elementor-heading-title,
	body .civ-hero-lede p,
	body .civ-trust-label,
	body .civ-trust-label .elementor-heading-title,
	body .civ-problem-h2 .elementor-heading-title,
	body .civ-problem-lede p,
	body .civ-full-h2 .elementor-heading-title,
	body .civ-full-lede p,
	body .civ-serv-h2 .elementor-heading-title,
	body .civ-serv-note p,
	body .civ-serv-list li .civ-serv-name,
	body .civ-serv-list li .civ-serv-desc,
	body .civ-proc-h2 .elementor-heading-title,
	body .civ-proc-note p,
	body .civ-work-h2 .elementor-heading-title,
	body .civ-work-lede p,
	body .civ-team-h2 .elementor-heading-title,
	body .civ-team-lede p,
	body .civ-cons-h2 .elementor-heading-title,
	body .civ-cons-body p,
	body .civ-about-h2 .elementor-heading-title,
	body .civ-about-body p,
	body .civ-about-big .elementor-heading-title,
	body .civ-about-final p,
	body .civ-statement-text .elementor-heading-title,
	body .civ-statement-note p,
	body .civ-contact-h2 .elementor-heading-title,
	body .civ-contact-body p,
	body .civ-blog-lede,
	body .civ-blog-head,
	body .civ-blog-empty,
	body .civ-post-excerpt,
	body .civ-single-cta-title,
	body .civ-single-cta-text,
	body .civ-404-text,
	body .civ-footer-claim,
	body .civ-footer-company,
	body .civ-footer-social-note,
	body .civ-entry > *,
	body .civ-entry p { max-width: 100%; }

	/* Trust traka: broj i opis blize jedno drugom */
	body .civ-trust-item { padding: 16px 0; }

	body .civ-trust-num .elementor-heading-title { margin: 0 0 4px; }
}

@media (max-width: 400px) {
	body .civ-hero > .e-con-inner,
	body .civ-trust > .e-con-inner,
	body .civ-problem > .e-con-inner,
	body .civ-full > .e-con-inner,
	body .civ-serv > .e-con-inner,
	body .civ-proc > .e-con-inner,
	body .civ-work > .e-con-inner,
	body .civ-team > .e-con-inner,
	body .civ-cons > .e-con-inner,
	body .civ-about > .e-con-inner,
	body .civ-contact > .e-con-inner { padding-inline: 0; }
}

/* ---- civ-eyebrow-mobile ----
   Oznaka iznad naslova je dugacka i na telefonu se lomi u dva reda. Crtica
   ispred nje uvlaci prvi red, pa drugi red pocinje levlje i lomi poravnanje.
   Zato se crtica na uskim ekranima sklanja, slovo se blago smanjuje, a razmak
   izmedju redova povecava da verzal ostane citljiv. */

@media (max-width: 767px) {
	body .civ-eyebrow .elementor-heading-title {
		font-size: 0.66rem;
		letter-spacing: 0.08em;
		line-height: 1.6;
	}

	body .civ-hero-text .civ-eyebrow { margin-bottom: 14px; }
}

@media (max-width: 400px) {
	body .civ-eyebrow .elementor-heading-title { font-size: 0.62rem; letter-spacing: 0.06em; }
}

/* ---- civ-hero-centered ----
   Tekst u heroju je centriran. Blokovi sa zadatom merom moraju dobiti i
   automatsku bocnu marginu, jer bi inace ostali uz levu ivicu iako je sam
   tekst u njima centriran. */

body .civ-hero-text { text-align: center; }

body .civ-hero-h1,
body .civ-hero-h1 .elementor-heading-title,
body .civ-hero-lede,
body .civ-hero-lede p { margin-inline: auto; }

body .civ-hero-actions { justify-content: center; }

body .civ-hero-text .civ-eyebrow .elementor-heading-title::before { margin-right: 12px; }