@charset "utf-8";
/* SIGNAL — Veterinarska ambulanta Filipović
   Frozen contract: DESIGN.md (IBM/Carbon derived), MOTION.md, INTERACTIONS.md.
   Flat surfaces, square geometry, 1px rules. No gradients, shadows, glass, rounded card walls.
   Chartreuse appears only on navy or photography. */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-300-normal.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-400-normal.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-600-normal.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;
}

/* ---------- Tokens ---------- */
:root {
  --primary: #163c6d;
  --primary-hover: #0e2d4f;
  --signal: #d6e500;
  --ink: #111827;
  --body: #344054;
  --muted: #626c7a;
  --canvas: #f8f9f5;
  --surface: #eef2ef;
  --inverse: #0e2d4f;
  --on-primary: #ffffff;
  --on-inverse: #ffffff;
  --hairline: #cbd5d1;
  --emergency: #b42318;
  --emergency-hover: #8f1c13;

  --xxs: 4px;
  --xs: 8px;
  --sm: 12px;
  --md: 16px;
  --lg: 24px;
  --xl: 32px;
  --xxl: 48px;
  --section: 96px;

  --gutter: 20px;
  --maxw: 1280px;
  --measure: 720px;
  --ctabar: 0px;

  --font: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 32px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
  scroll-behavior: auto;
}
img, picture, svg { max-width: 100%; }
img { display: block; height: auto; border-radius: 2px; }
a { color: var(--primary); }
a:visited { color: var(--primary); } /* keep brand color after tap — no purple default */
a:hover { color: var(--primary-hover); }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 var(--md); }
h1, h2, h3, h4 { margin: 0 0 var(--md); color: var(--ink); font-weight: 300; }
h1 {
  font-size: clamp(44px, 4.2vw + 24px, 72px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(32px, 1.4vw + 26px, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h3 { font-size: 28px; font-weight: 400; line-height: 1.25; }
h4 { font-size: 21px; font-weight: 400; line-height: 1.33; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--xl) 0; }
table { border-collapse: collapse; width: 100%; }

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

/* ---------- Focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.utility :focus-visible,
.footer :focus-visible,
.band--cta :focus-visible,
.band--emergency :focus-visible,
.mobilemenu :focus-visible,
.svcmenu :focus-visible,
.mobilecta__primary:focus-visible,
.hero--emergency :focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--primary);
  color: var(--on-primary);
  padding: var(--sm) var(--md);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.skiplink:focus {
  left: 0;
  color: var(--on-primary);
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* ---------- Layout shell ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.main { outline: none; padding-bottom: var(--section); }
.section { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 768px) { .section { padding-top: 72px; padding-bottom: 72px; } }
@media (min-width: 1100px) { .section { padding-top: var(--section); padding-bottom: var(--section); } }
.section--tight { padding-top: var(--xxl); padding-bottom: var(--xxl); }
.section--surface { background: var(--surface); }
.measure { max-width: var(--measure); }
.measure--wide { max-width: 860px; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.utility {
  background: var(--primary);
  color: var(--on-primary);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.utility__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--xs) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--xs) var(--md);
  min-height: 32px;
  align-items: center;
}
.utility__item { white-space: normal; }
.utility a { color: var(--on-primary); }
.utility a:visited { color: var(--on-primary); }
@media (max-width: 767px) {
  .utility__item--hours { display: none; }
}

.header__bar { background: var(--canvas); }
.header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: var(--md);
}
.header__logo { display: block; flex: 0 0 auto; padding: var(--xs) 0; }
.logo img { width: 176px; height: auto; border-radius: 0; }
.logo--footer img { width: 200px; }

.nav { display: none; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--xs); }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sm);
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
  position: relative;
}
.nav__link:visited { color: var(--ink); }
.nav__link::after {
  content: '';
  position: absolute;
  left: var(--sm);
  right: var(--sm);
  bottom: 14px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 160ms linear;
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--ink); }
.nav__link.is-current::after { transform: scaleX(1); }
/* Trenutna ruta: chartreuse segment ugnežden u navy šinu — nikad direktno na Warm White. */
.nav__link.is-current::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  background: var(--signal);
  z-index: 1;
}
.nav__item--has-menu { gap: 0; }
.nav__trigger {
  appearance: none;
  background: transparent;
  border: 0;
  min-width: 32px;
  min-height: 44px;
  padding: 0 var(--xxs);
  cursor: pointer;
  color: var(--ink);
}
.nav__chev {
  display: block;
  width: 8px; height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.header__cta {
  display: none;
  margin-left: var(--md);
}
@media (min-width: 1100px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
}
/* Cascade fix: .btn (later in file, same specificity) was overriding the
   header CTA's display:none on mobile, so the phone number wrapped to 3
   lines and blew the 72px header up to 84px. Higher specificity wins. */
.header .header__cta { display: none; }
@media (min-width: 1100px) {
  .header .header__cta { display: inline-flex; }
}

/* Services menu — plain two-column, opens on hover, click and keyboard focus. */
.svcmenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 480px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--primary);
  padding: var(--md);
  z-index: 50;
}
.svcmenu[hidden] { display: none; }
.nav__item--has-menu:hover .svcmenu,
.nav__item--has-menu:focus-within .svcmenu { display: block; }
.svcmenu__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--xl); }
.svcmenu a {
  display: block;
  padding: var(--sm) var(--xs);
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.svcmenu a:visited { color: var(--ink); }
.svcmenu li:last-child a { border-bottom: 0; }
.svcmenu a:hover { background: var(--surface); }

/* Mobile menu — full-width navy sheet below the header. */
.navtoggle {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--sm);
  background: transparent;
  border: 1px solid var(--primary);
  border-radius: 0;
  color: var(--primary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.navtoggle__bars {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  position: relative;
}
.navtoggle__bars::before,
.navtoggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 16px;
  height: 1px;
  background: currentColor;
}
.navtoggle__bars::before { top: -5px; }
.navtoggle__bars::after { top: 5px; }
.navtoggle[aria-expanded='true'] { background: var(--primary); color: var(--on-primary); }
@media (min-width: 1100px) { .navtoggle { display: none; } }

.mobilemenu {
  background: var(--primary);
  color: var(--on-primary);
  border-top: 1px solid var(--hairline);
}
.mobilemenu[hidden] { display: none; }
.mobilemenu__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--md) var(--gutter) var(--lg);
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.mobilemenu a {
  display: block;
  min-height: 44px;
  padding: var(--sm) 0;
  color: var(--on-inverse);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}
.mobilemenu a:visited { color: var(--on-inverse); }
.mobilemenu a[aria-current='page'] { border-bottom-color: var(--signal); }
.mobilemenu__label {
  margin: var(--lg) 0 var(--xxs);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 44px;
  padding: 14px 20px;
  border-radius: 0;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:visited { color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn--secondary {
  background: var(--canvas);
  color: var(--primary);
  border-color: var(--primary);
}
.btn--secondary:visited { color: var(--primary); }
.btn--secondary:hover { background: var(--surface); color: var(--primary-hover); }
.btn--onnavy { background: var(--canvas); color: var(--primary); }
.btn--onnavy:visited { color: var(--primary); }
.btn--onnavy:hover { background: var(--surface); color: var(--primary-hover); }
.btn--ghost {
  background: transparent;
  color: var(--on-primary);
  border-color: rgba(255, 255, 255, 0.6);
}
.btn--ghost:visited { color: var(--on-primary); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--on-primary); }
.btn--emergency { background: var(--emergency); color: var(--on-primary); }
.btn--emergency:visited { color: var(--on-primary); }
.btn--emergency:hover { background: var(--emergency-hover); color: var(--on-primary); }
.btn--onred { background: var(--canvas); color: var(--emergency); }
.btn--onred:visited { color: var(--emergency); }
.btn--onred:hover { background: var(--surface); color: var(--emergency-hover); }
.btn__hint { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0.04em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sm); margin-top: var(--lg); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  margin: 0 0 var(--sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.lead { font-size: 21px; font-weight: 400; line-height: 1.4; color: var(--ink); }
.prose p { max-width: var(--measure); }
.prose--wide p { max-width: 860px; }
.caption { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.sub { color: var(--muted); }

/* ---------- Breadcrumbs ---------- */
.crumbs {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sm) var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.crumbs__item { color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; }
.crumbs__item + .crumbs__item::before { content: '›'; margin-right: 6px; color: var(--hairline); }
.crumbs a { color: var(--muted); display: inline-block; padding: 5px 0; }
.crumbs a:visited { color: var(--muted); }
/* On very narrow screens keep crumbs on one compact line when possible. */
@media (max-width: 599px) {
  .crumbs__list { font-size: 12px; gap: 3px 5px; }
  .crumbs__item + .crumbs__item::before { margin-right: 5px; }
  /* Drop the "Naslovna" crumb on phones: the logo already links home, and
     three-level trails (Naslovna › Usluge › X) wrap under iOS Dynamic Type.
     Hide the first item and remove the separator it would leave behind. */
  .crumbs__item:first-child { display: none; }
  .crumbs__item:nth-child(2)::before { content: none; }
}

/* ---------- Hero ---------- */
.hero { padding-top: var(--xxl); padding-bottom: var(--xxl); }
.hero__grid { display: grid; gap: var(--xl); }
@media (min-width: 1100px) {
  .hero--split .hero__grid { grid-template-columns: 7fr 9fr; align-items: start; gap: var(--xxl); }
}
.hero__sub { font-size: 21px; color: var(--muted); margin-top: calc(-1 * var(--xs)); }

/* ---------- Diagnostic Plate ---------- */
.plate { margin: 0; }
.plate__frame { position: relative; padding: var(--sm); }
.plate__image { position: relative; }
.plate__image img { width: 100%; }
.plate__tick {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--primary);
  border-style: solid;
  border-width: 0;
}
.plate__tick--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.plate__tick--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.plate__tick--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.plate__tick--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

/* ---------- Evidence Tick ---------- */
.evidence {
  display: flex;
  gap: var(--md);
  margin: var(--xl) 0;
  max-width: 760px;
}
.evidence__rail {
  flex: 0 0 2px;
  width: 2px;
  background: var(--primary);
  position: relative;
}
.evidence__tick {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 16px;
  margin-top: -8px;
  background: var(--signal);
}
.evidence__body { flex: 1 1 auto; }
.evidence__label {
  margin: 0 0 var(--xxs);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.evidence__text { margin: 0; font-size: 21px; line-height: 1.33; color: var(--ink); }

/* ---------- Service index ---------- */
.index__list { border-top: 1px solid var(--hairline); }
.index__row { border-bottom: 1px solid var(--hairline); }
.index__link {
  display: grid;
  grid-template-columns: 2px 40px 1fr 24px;
  align-items: start;
  gap: var(--md);
  padding: var(--lg) 0;
  color: var(--ink);
  text-decoration: none;
}
.index__link:hover, .index__link:focus-visible { background: var(--surface); }
.index__rail {
  align-self: stretch;
  width: 2px;
  background: var(--primary);
  position: relative;
}
.index__tick {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 16px;
  margin-top: -8px;
  background: var(--signal);
  opacity: 0;
  transition: opacity 120ms linear;
}
.index__link:hover .index__tick,
.index__link:focus-visible .index__tick { opacity: 1; }
.index__num { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); padding-top: 6px; }
.index__main { display: block; }
.index__label { display: block; font-size: 21px; line-height: 1.33; color: var(--ink); }
.index__teaser { display: block; margin-top: var(--xxs); font-size: 15px; color: var(--body); }
.index__arrow {
  font-size: 21px;
  color: var(--primary);
  opacity: 0;
  transition: opacity 120ms linear;
  text-align: right;
}
.index__link:hover .index__arrow,
.index__link:focus-visible .index__arrow { opacity: 1; }
@media (max-width: 767px) {
  .index__link { grid-template-columns: 2px 32px 1fr 20px; gap: var(--sm); padding: var(--md) 0; }
  .index__arrow { opacity: 1; }
  .index__tick { opacity: 1; }
}

/* ---------- Bands ---------- */
.band { padding: var(--xxl) 0; }
.band__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.band--cta { background: var(--primary); color: var(--on-primary); }
.band--cta .band__title, .band--emergency .band__title { color: var(--on-primary); font-size: 28px; font-weight: 400; }
.band--cta .band__text, .band--emergency .band__text { color: rgba(255, 255, 255, 0.9); max-width: 640px; }
.band--emergency { background: var(--emergency); color: var(--on-primary); }
.band--info { background: var(--surface); color: var(--ink); }
.band__actions { display: flex; flex-wrap: wrap; gap: var(--sm); margin-top: var(--lg); }

/* ---------- FAQ ---------- */
.faq { margin-top: var(--xxl); }
.faq__title { font-size: 28px; font-weight: 400; }
.faq__list { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  min-height: 56px;
  padding: var(--md) 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: 17px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--surface); }
.faq__mark {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
  transform: rotate(45deg);
  transition: transform 120ms linear;
  margin-right: var(--xs);
}
.faq__item[open] .faq__mark { transform: rotate(-135deg); }
.faq__a { padding: 0 0 var(--md); max-width: var(--measure); }
.faq__a p { margin: 0; }

/* ---------- Matrix (/dijagnostika/) ---------- */
.matrix { width: 100%; border-top: 1px solid var(--hairline); }
.matrix caption { text-align: left; padding-bottom: var(--sm); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.matrix th, .matrix td {
  border-bottom: 1px solid var(--hairline);
  padding: var(--md) var(--sm);
  text-align: left;
  vertical-align: top;
  font-size: 15px;
}
.matrix thead th { font-weight: 600; color: var(--ink); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.matrix tbody th { font-weight: 400; font-size: 17px; color: var(--ink); width: 22%; }
.matrix tbody th a { text-decoration: none; }
.matrix tbody th a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .matrix, .matrix thead, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: auto; }
  .matrix thead { display: none; }
  .matrix tr { border-bottom: 1px solid var(--hairline); padding: var(--md) 0; }
  .matrix th, .matrix td { border-bottom: 0; padding: 0 0 var(--xs); }
  .matrix td::before { content: attr(data-label) ': '; color: var(--muted); font-size: 13px; letter-spacing: 0.04em; }
}

/* ---------- Laboratory sub-index ---------- */
.labgrid { display: grid; gap: var(--xl); }
.labgrid > * { min-width: 0; }
@media (min-width: 1100px) {
  .labgrid { grid-template-columns: 240px 1fr; align-items: start; gap: var(--xxl); }
  .labindex { position: sticky; top: 140px; }
}
.labindex__title { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--xs); }
.labindex__list { border-top: 1px solid var(--hairline); }
.labindex__list li { border-bottom: 1px solid var(--hairline); }
.labindex__list a {
  display: block;
  min-height: 44px;
  padding: var(--sm) 0;
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
}
.labindex__list a:visited { color: var(--ink); }
.labindex__list a:hover { background: var(--surface); }
@media (max-width: 1099px) {
  .labindex__list {
    display: flex;
    gap: var(--md);
    overflow-x: auto;
    scrollbar-width: auto;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: var(--xs);
  }
  .labindex__list li { border-bottom: 0; flex: 0 0 auto; }
}
.labsection { scroll-margin-top: 160px; padding-top: var(--xl); border-top: 1px solid var(--hairline); }
.labsection:first-of-type { border-top: 0; padding-top: 0; }
.labsection h2 { font-size: 28px; font-weight: 400; }

/* ---------- Team ---------- */
.team { display: grid; gap: var(--xl); }
@media (min-width: 768px) { .team { grid-template-columns: repeat(2, 1fr); gap: var(--xl) var(--lg); } }
@media (min-width: 1100px) { .team { grid-template-columns: repeat(3, 1fr); gap: var(--xxl) var(--lg); } }
.member__figure { margin: 0 0 var(--md); }
.member__figure img { width: 100%; }
.member__name { font-size: 21px; font-weight: 400; color: var(--ink); margin: 0 0 var(--xxs); }
.member__role {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sm);
  padding: var(--xs) 0;
  border-top: 1px solid var(--hairline);
}
.member__bio { font-size: 15px; margin: 0; }
.member--offset { margin-top: var(--xl); }
.animals { display: grid; gap: var(--lg); }
@media (min-width: 768px) { .animals { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Contact / map ---------- */
.contactgrid { display: grid; gap: var(--xl); }
@media (min-width: 1100px) { .contactgrid { grid-template-columns: 1fr 1fr; gap: var(--xxl); } }
.datalist { border-top: 1px solid var(--hairline); }
.datalist div { display: grid; grid-template-columns: 140px 1fr; gap: var(--md); padding: var(--sm) 0; border-bottom: 1px solid var(--hairline); }
.datalist dt { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.datalist dd { margin: 0; color: var(--ink); }
@media (max-width: 599px) { .datalist div { grid-template-columns: 1fr; gap: var(--xxs); } }

.mapbox { border: 1px solid var(--hairline); background: var(--surface); scroll-margin-top: 160px; }
.mapbox__media { position: relative; }
.mapbox__frame { width: 100%; height: 420px; border: 0; display: block; }
.mapbox__panel { padding: var(--md); border-top: 1px solid var(--hairline); }
.mapbox__actions { display: flex; flex-wrap: wrap; gap: var(--sm); }

/* ---------- Hours / NAP blocks ---------- */
.hours__title { font-size: 21px; font-weight: 400; }
.hours__list { border-top: 1px solid var(--hairline); }
.hours__list li { padding: var(--xs) 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.hours__oncall { margin-top: var(--sm); padding-left: var(--sm); border-left: 2px solid var(--primary); font-size: 15px; color: var(--ink); }
.nap { display: grid; gap: var(--xxs); font-size: 15px; }
.nap__name { color: var(--ink); font-size: 17px; }
.nap a { display: inline-block; padding: 5px 0; }

/* ---------- Emergency route ---------- */
.hero--emergency {
  background: var(--inverse);
  color: var(--on-inverse);
  padding-top: var(--xxl);
  padding-bottom: var(--xxl);
}
.hero--emergency h1 { color: var(--on-inverse); }
.hero--emergency .emg__rule { height: 4px; background: var(--emergency); max-width: 220px; margin: 0 0 var(--lg); }
.hero--emergency .emg__lead { font-size: 21px; color: var(--on-inverse); max-width: 720px; }
.emg__num {
  display: block;
  font-size: clamp(32px, 4vw + 12px, 56px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--on-inverse);
  text-decoration: none;
}
.emg__numlabel { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.emg__numbers { display: grid; gap: var(--lg); margin: var(--xl) 0; }
@media (min-width: 768px) { .emg__numbers { grid-template-columns: 1fr 1fr; max-width: 720px; } }
.emg__num:hover { color: var(--signal); }
.emg__steps { border-top: 1px solid var(--hairline); max-width: 760px; }
.emg__steps li { padding: var(--md) 0; border-bottom: 1px solid var(--hairline); }
.emg__no { color: var(--emergency); font-weight: 600; }

/* ---------- Home compositions ---------- */
.homeservices { display: grid; gap: var(--lg); }
@media (min-width: 768px) { .homeservices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .homeservices { grid-template-columns: repeat(12, 1fr); gap: var(--lg) var(--lg); } }
.svcblock { border-top: 2px solid var(--primary); padding-top: var(--md); }
.svcblock h3 { font-size: 21px; font-weight: 400; margin-bottom: var(--xs); }
.svcblock p { font-size: 15px; margin-bottom: var(--sm); }
.svcblock a { font-size: 15px; font-weight: 600; text-decoration: none; }
.svcblock a:hover { text-decoration: underline; }
@media (min-width: 1100px) {
  .svcblock--wide { grid-column: span 5; }
  .svcblock--mid { grid-column: span 4; }
  .svcblock--narrow { grid-column: span 3; }
}
.quote { border-left: 2px solid var(--primary); padding-left: var(--md); max-width: 640px; margin: 0; }
.quote blockquote { margin: 0 0 var(--xs); font-size: 21px; line-height: 1.33; color: var(--ink); }
.quote figcaption { font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }
.trustgrid { display: grid; gap: var(--lg); }
@media (min-width: 768px) { .trustgrid { grid-template-columns: repeat(3, 1fr); } }
.trustgrid figure { margin: 0; }
.trustgrid img { width: 100%; }
.trustgrid figcaption { margin-top: var(--xs); font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }

.carecols { display: grid; gap: var(--xl); }
@media (min-width: 1100px) { .carecols { grid-template-columns: 6fr 6fr; align-items: start; gap: var(--xxl); } }
.instrcols { display: grid; gap: var(--xl); }
@media (min-width: 1100px) { .instrcols { grid-template-columns: 5fr 7fr; align-items: start; gap: var(--xxl); } }

.linkrow { display: flex; flex-wrap: wrap; gap: var(--sm) var(--lg); margin-top: var(--lg); }
.linkrow a { font-size: 15px; font-weight: 600; text-decoration: none; display: inline-block; padding: 5px 0; }
.linkrow a:hover { text-decoration: underline; }

.notecard { border-left: 2px solid var(--primary); padding: 0 0 0 var(--md); max-width: var(--measure); }
.notecard h3 { font-size: 21px; font-weight: 400; }

/* ---------- Footer ---------- */
.footer {
  background: var(--inverse);
  color: var(--on-inverse);
  padding: 64px var(--gutter);
  font-size: 15px;
}
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: var(--xl);
}
@media (min-width: 768px) { .footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--xxl); } }
.footer a { color: var(--on-inverse); }
.footer a:visited { color: var(--on-inverse); }
.footer a:hover { color: var(--signal); }
.footer__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-inverse);
  margin-bottom: var(--sm);
  padding-bottom: var(--xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.footer__nap { display: grid; gap: var(--xxs); margin: var(--md) 0; }
.footer__nap a { display: inline-block; padding: 5px 0; }
.footer__name { font-size: 17px; }
.footer__hours li, .footer__links li { padding: var(--xxs) 0; }
.footer__links a { text-decoration: none; display: inline-block; padding: 5px 0; }
.footer__links a:hover { text-decoration: underline; }
.footer__oncall { margin-top: var(--sm); padding-left: var(--sm); border-left: 2px solid var(--signal); }
.footer__social { margin-top: var(--md); display: grid; gap: var(--xxs); }
.footer__social a { display: inline-block; padding: 5px 0; }
.footer__legal {
  max-width: var(--maxw);
  margin: var(--xl) auto 0;
  padding-top: var(--md);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.footer__legal p { margin: 0; }

/* ---------- Persistent mobile CTA ---------- */
.mobilecta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  background: var(--canvas);
  border-top: 1px solid var(--primary);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobilecta__row { display: flex; }
/* PERSONALIZATION.md — bezbednosna linija po ruti; sadržaj se ne menja. */
.mobilecta__safety {
  margin: 0;
  padding: var(--xxs) var(--md);
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.mobilecta__primary,
.mobilecta__secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--sm) var(--md);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.mobilecta__primary { flex: 1 1 auto; background: var(--primary); color: var(--on-primary); gap: var(--xs); }
.mobilecta__primary:visited { color: var(--on-primary); }
.mobilecta__num { font-weight: 400; }
.mobilecta__secondary { flex: 0 0 auto; background: var(--canvas); color: var(--primary); border-left: 1px solid var(--primary); }
.mobilecta__secondary:visited { color: var(--primary); }
@media (min-width: 768px) { .mobilecta { display: none; } }
@media (max-width: 767px) {
  :root { --ctabar: 56px; }
  body { padding-bottom: calc(var(--ctabar) + env(safe-area-inset-bottom, 0px)); }
  body.page--emergency { padding-bottom: calc(var(--ctabar) + 32px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Ruled lists ---------- */
.ruledlist { border-top: 1px solid var(--hairline); margin: var(--lg) 0 0; max-width: var(--measure); }
.ruledlist li { padding: var(--sm) 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }

/* Bez JavaScript-a: pun spisak destinacija ostaje u dokumentu. */
.noscriptnav {
  border-top: 1px solid var(--hairline);
  padding: var(--sm) var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.noscriptnav ul { display: flex; flex-wrap: wrap; gap: var(--xs) var(--md); }
.noscriptnav a { font-size: 15px; }

/* ---------- Motion (home plate registration only) ---------- */
.plate--home .plate__tick {
  opacity: 0;
  transform: scale(0.6);
}
.plate--home.is-ready .plate__tick {
  animation: tick-in 420ms linear forwards;
}
.plate--home.is-ready .plate__tick--tr { animation-delay: 60ms; }
.plate--home.is-ready .plate__tick--bl { animation-delay: 120ms; }
.plate--home.is-ready .plate__tick--br { animation-delay: 180ms; }
.plate--home.is-static .plate__tick {
  opacity: 1;
  transform: none;
  animation: none;
}
@keyframes tick-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes locator-in {
  from { opacity: 0; transform: translateX(-56px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .plate--home .plate__tick { opacity: 1; transform: none; }
  .labsection, .mapbox { scroll-margin-top: 0; }
}

/* No-JS: menus must remain reachable. */
.no-js .navtoggle { display: none; }
.no-js .mobilemenu[hidden] { display: block; }
.no-js .svcmenu[hidden] { display: none; }
.no-js .plate--home .plate__tick { opacity: 1; transform: none; }
@media (min-width: 1100px) {
  .no-js .mobilemenu[hidden] { display: none; }
}

@media print {
  .header, .mobilecta, .skiplink, .band--cta { display: none; }
  body { background: #fff; color: #000; }
}