/* Prvobitni Plex — the first look of the site (navy hero, rounded cards, teal accents), set in the Kontrolna tabla type:
   IBM Plex Sans for text and headlines, IBM Plex Mono for small labels. Fonts self-hosted, subset to Latin + Serbian Latin. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../../fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../../fonts/ibm-plex-sans-sr-400.woff2") format("woff2"); unicode-range: U+0106-0107,U+010C-010D,U+0110-0111,U+0160-0161,U+017D-017E; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../../fonts/ibm-plex-sans-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../../fonts/ibm-plex-sans-sr-500.woff2") format("woff2"); unicode-range: U+0106-0107,U+010C-010D,U+0110-0111,U+0160-0161,U+017D-017E; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../../fonts/ibm-plex-sans-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../../fonts/ibm-plex-sans-sr-600.woff2") format("woff2"); unicode-range: U+0106-0107,U+010C-010D,U+0110-0111,U+0160-0161,U+017D-017E; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../../fonts/ibm-plex-sans-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../../fonts/ibm-plex-sans-sr-700.woff2") format("woff2"); unicode-range: U+0106-0107,U+010C-010D,U+0110-0111,U+0160-0161,U+017D-017E; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../../fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../../fonts/ibm-plex-mono-sr-400.woff2") format("woff2"); unicode-range: U+0106-0107,U+010C-010D,U+0110-0111,U+0160-0161,U+017D-017E; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../../fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../../fonts/ibm-plex-mono-sr-500.woff2") format("woff2"); unicode-range: U+0106-0107,U+010C-010D,U+0110-0111,U+0160-0161,U+017D-017E; }

:root {
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
h1 { font-weight: 600; letter-spacing: -0.022em; }
h2, h3 { font-weight: 600; }
.facts__value { font-weight: 600; }

/* small labels in mono, like a report */
.eyebrow { font-family: var(--mono); font-weight: 500; letter-spacing: 0.06em; }
.service__tag, .point__num, .step__num, .timeline__years, .contact-item__label, .cta__line span, .site-footer h2 { font-family: var(--mono); font-weight: 500; letter-spacing: 0.06em; }
.creds li, .tags li, .chips a { font-family: var(--mono); font-size: 0.82rem; }
.lang__opt { font-family: var(--mono); font-weight: 500; }

/* no italic face is loaded: notes stay upright instead of a synthetic slant */
em, .note, .service__sub, .timeline__note { font-style: normal; }

/* Darko's request (24.10.2026): longer running text aligned to both margins (justified), with hyphenation.
   Only where the column is wide enough (about 45+ characters per line) and from 700px up;
   on phones and in narrow columns (cards, tiles, FAQ columns) the text stays left-aligned to avoid wide gaps.
   The four „Zašto My Business Partner“ columns are justified too, at Darko's request (24.10.2026). */
@media (min-width: 700px) {
  .fit__item p, .section__head .lead, .split__text > p.lead, .cover__text .lead, .prose p, .grid-4 .point p {
    text-align: justify; -webkit-hyphens: auto; hyphens: auto; text-wrap: pretty;
  }
}

/* Darko's choices (24.10.2026):
   - list markers are a small teal arrow (chevron); white-teal on navy backgrounds;
   - "Da li smo pravi izbor" situations are marked with a small "Most", the bridge from the logo;
   - Services, Fractional CFO "Šta obuhvata": each service with what the owner gets (service → result). */
.ticks li::before { content: ""; width: 0.42em; height: 0.42em; top: 0.52em; left: 0.08em; border-radius: 0; box-shadow: none; background: none;
  border-top: 2px solid var(--teal); border-right: 2px solid var(--teal); transform: rotate(45deg); }
.model .ticks li::before { background: none; border-color: var(--teal-on-navy); }
@media (min-width: 961px) { .step:last-child .ticks li::before { background: none; border-color: var(--teal-on-navy); } }

.fit__item { padding-left: 2.1rem; }
.fit__item::before { width: 1.25rem; height: 1.25rem; top: 1.58rem; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M10.5 1.5 13 13.2M10.5 1.5 16.5 12.2' stroke='%231E2761' stroke-opacity='.7' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M6 17 10.5 1.5' stroke='%231E2761' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M1.5 15.4 17 12.4' stroke='%2317A2A8' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / contain; }

/* Darko (29.10.2026): the nine service rows carry no numbers, in both styles and both languages */
.results__head, .results li { display: grid; grid-template-columns: minmax(0, 1fr) 2.6rem minmax(0, 1fr); align-items: baseline; }
.results__head { margin-top: 1rem; padding: 0.85rem 0 0.7rem; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--navy);
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); }
.results__head span:first-child { grid-column: 1; }
.results__head span:last-child { grid-column: 3; }
.results { list-style: none; margin: 0; padding: 0; }
.results li { padding: 0.8rem 0; border-bottom: 1px solid rgba(30, 39, 97, 0.16); }
.results__svc { font-weight: 600; color: var(--teal-ink); padding-right: 1rem; }
.results__arrow { color: var(--teal); }
.results__out { color: var(--ink); }
.results__more { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (max-width: 760px) {
  .results__head { display: none; }
  .results { border-top: 2px solid var(--navy); margin-top: 1rem; }
  .results li { grid-template-columns: minmax(0, 1fr); row-gap: 0.2rem; }
  .results__arrow { display: none; }
  .results__out { grid-column: 1; }
  .results__out::before { content: "→ "; color: var(--teal); }
}

/* Darko (24.10.2026): no photo under the service → result table; "Koristi" and "Kako funkcioniše" as two equal cards */
.results__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 0.6rem + 1.5vw, 2rem); }
.results__more .point { background: var(--pale-2); border-top: 4px solid var(--teal); border-radius: var(--radius-lg); padding: 1.6rem 1.8rem 1.8rem; }
.results__more .point h3 { margin-bottom: 1rem; }
@media (max-width: 760px) { .results__more { grid-template-columns: minmax(0, 1fr); } .results__more .point { padding: 1.3rem 1.25rem 1.5rem; } }

.section--navy.service-block .photo-bg--cta img { object-position: 50% 45%; }

/* Darko (24.10.2026): the short company description in the footer is justified too (soft hyphens added in build.py) */
.site-footer__about { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

/* Darko (24.10.2026): the six answers in "Ne morate da budete stručnjak za programe" are justified too (break points added in build.py) */
@media (min-width: 700px) { .faq-grid .point p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } }

/* Darko (24.10.2026): About page cover shows the Ada bridge pylon from the air (Unsplash, Anton Lukin); a lighter navy veil so the pylon shows */
.cover--portrait .photo-bg--cover img { object-position: 50% 0%; }
.cover--portrait .photo-bg--cover::after { background: linear-gradient(90deg, rgba(20, 26, 71, 0.93) 0%, rgba(30, 39, 97, 0.74) 45%, rgba(30, 39, 97, 0.5) 100%); }

/* Darko (24.10.2026): the description of the selected report (Izveštaji page) is justified too */
@media (min-width: 700px) { .viewer__info p[data-info-text] { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } }

/* 25.10.2026: English service cards (home) — the short note above "Learn more" always takes two lines,
   so the dividing lines of all three cards stay level when one note wraps */
@media (min-width: 961px) {
  html[lang="en"] .service__foot > span { min-height: 2lh; }
}

/* Darko (29.10.2026): home and Contact page tops show two different photos of the Ada bridge
   (home: from the riverside walk, Pexels, Nikola Kojević; Contact: the pylon over the city, Pexels, Olivera Qabajeh).
   On wide screens the photo sits on the right and fades into the navy from the left, so the pylon is not hidden behind the text;
   on phones it stays full-width under the navy veil. */
@media (min-width: 821px) {
  .hero .photo-bg--hero, .cover--contact .photo-bg--cover { left: 44%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 16%, #000 34%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 16%, #000 34%); }
  .hero .photo-bg--hero::after {
    background: linear-gradient(90deg, rgba(30, 39, 97, 0.55) 0%, rgba(30, 39, 97, 0.28) 45%, rgba(30, 39, 97, 0.18) 100%),
                linear-gradient(0deg, rgba(20, 26, 71, 0.6) 0%, rgba(20, 26, 71, 0) 40%); }
  .cover--contact .photo-bg--cover::after { background: linear-gradient(90deg, rgba(30, 39, 97, 0.55) 0%, rgba(30, 39, 97, 0.3) 50%, rgba(30, 39, 97, 0.22) 100%); }
  .hero .photo-bg--hero img { object-position: 50% 24%; }
  .cover--contact .photo-bg--cover { left: 54%; }   /* a narrower photo, so the pylon tip, the stays and the city all fit */
  .cover--contact .photo-bg--cover img { object-position: 50% 6%; }
}
@media (max-width: 820px) {
  .hero .photo-bg--hero img { object-position: 38% 30%; }
  .cover--contact .photo-bg--cover img { object-position: 48% 20%; }
}