/* ============================================================
   TOKENI — miran, suzdržan paleta; jedan naglasak, ne pet.
   ============================================================ */
:root{
  --paper:      #F7F4EC;
  --paper-2:    #EFEAE0;
  --card:       #FFFFFF;
  --ink:        #1C1B17;
  --ink-soft:   #58564C;
  --ink-faint:  #8B8878;
  --pine:       #2B3B2E;
  --pine-deep:  #17211A;
  --rust:       #9C5A34;
  --line:       #DFD9C8;
  --line-2:     #CFC7AF;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", "Segoe UI", system-ui, sans-serif;

  --wrap: 71.5rem;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  --r-s: 3px;
  --r-m: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

html{
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* sidrišta ne završe ispod ljepljive trake */
}
html[data-tekst="velik"]  { font-size: 113%; }
html[data-tekst="najveci"]{ font-size: 126%; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ transition-duration:.001ms !important; }
}

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

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--pine); color:#fff; }

/* ============================================================
   TIPOGRAFIJA
   ============================================================ */
h1,h2,h3{ font-family: var(--serif); font-weight:500; line-height:1.12; letter-spacing:-.01em; margin:0; color: var(--ink); }
h1{ font-size: clamp(2.2rem, 1.55rem + 2.6vw, 3.75rem); font-weight:500; }
h2{ font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.5rem); }
h3{ font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem); font-family: var(--sans); font-weight:700; }

p{ margin:0 0 1.05em; max-width: 60ch; }
.vodeci{ font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; line-height:1.6; }

a{ color: var(--pine); }
a:hover{ color: var(--rust); }

.oznaka-sekcije{
  display:block; font-family: var(--sans); font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color: var(--rust);
  margin-bottom: 1rem;
}

.broj-veliki{ font-family: var(--serif); font-weight:400; color: var(--line-2); font-size: 3.4rem; line-height:1; }

.ph{ background:#F6E7C8; color: var(--ink); border-bottom:2px dotted var(--rust); padding:0 .18em; border-radius:2px; white-space:nowrap; }

/* ============================================================
   FOKUS / PRESKOK
   ============================================================ */
:focus{ outline:none; }
:focus-visible{ outline: 2px solid var(--rust); outline-offset: 3px; }
.preskoci{
  position:absolute; left:.75rem; top:-6rem; z-index:200;
  background: var(--ink); color:#fff; padding:.85rem 1.2rem;
  font-weight:600; text-decoration:none; transition: top .2s var(--ease);
}
.preskoci:focus{ top:.75rem; color:#fff; }

/* ============================================================
   GUMBI — pravokutni, mirni, s razmaknutim malim slovima
   ============================================================ */
.gumb{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height: 3rem; padding: 0 1.5rem;
  font-family: var(--sans); font-size: .85rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  border-radius: var(--r-s);
  border: 1px solid transparent;
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.gumb--puni{ background: var(--ink); color:#FFFDF8; }
.gumb--puni:hover,.gumb--puni:focus-visible{ background: var(--pine); color:#fff; }
.gumb--obris{ background: transparent; color: var(--ink); border-color: var(--ink); }
.gumb--obris:hover,.gumb--obris:focus-visible{ background: var(--ink); color:#fff; }
.gumb--svijetli{ border-color: rgba(255,253,248,.55); color:#FFFDF8; }
.gumb--svijetli:hover{ background: rgba(255,253,248,.14); }
.gumb svg{ flex:none; }

.tekst-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; text-decoration:none; color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: .1rem;
}
.tekst-link:hover{ color: var(--rust); border-color: var(--rust); }

/* ============================================================
   RASPORED
   ============================================================ */
.omot{ width:min(100% - 2*var(--gutter), var(--wrap)); margin-inline:auto; }
section{ padding-block: clamp(3.75rem, 2.5rem + 5vw, 7.5rem); }
.rub-gore{ border-top: 1px solid var(--line); }

/* ============================================================
   NAVIGACIJA
   ============================================================ */
.traka{
  position: sticky; top:0; z-index:100;
  background: rgba(247,244,236,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.traka .omot{ width:min(100% - 2*var(--gutter), 80rem); }
.traka__red{ display:flex; align-items:center; gap: 1.5rem; padding-block: .9rem; }

.wordmark{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color: var(--ink); flex:none; }
.wordmark__znak{
  width:2.5rem; height:2.5rem; border:1px solid var(--ink); border-radius:50%;
  display:grid; place-items:center; font-family: var(--serif); font-size:1.05rem; color: var(--ink);
  flex:none;
}
.wordmark__tekst{ font-family: var(--serif); font-size:1.18rem; letter-spacing:.01em; line-height:1.1; }
.wordmark__pod{ display:block; font-family: var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-top:.15rem; }

.izbornik{ display:flex; align-items:center; gap:.1rem; margin-left:auto; }
.izbornik a{
  display:inline-flex; align-items:center; min-height: 2.75rem;
  padding:.4rem .8rem; color: var(--ink-soft); text-decoration:none;
  font-weight:600; font-size:.88rem; white-space:nowrap;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.izbornik a:hover,.izbornik a:focus-visible{ color: var(--ink); border-color: var(--rust); }

.traka__desno{ display:flex; align-items:center; gap:.9rem; flex:none; }
.tel-traka{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.95rem; font-weight:700; color: var(--ink); text-decoration:none; white-space:nowrap;
}
.tel-traka:hover{ color: var(--rust); }

.slova{ display:flex; align-items:center; gap:.15rem; border:1px solid var(--line-2); border-radius:999px; padding:.15rem .3rem; }
.slova__opis{ font-size:.62rem; font-weight:700; letter-spacing:.06em; color: var(--ink-faint); padding-inline:.3rem; text-transform:uppercase; }
.slova button{
  min-width:1.9rem; min-height:1.9rem; border:none; border-radius:999px; background:transparent; cursor:pointer;
  font-family: var(--sans); font-weight:700; color: var(--ink);
}
.slova button:nth-child(2){ font-size:.74rem; }
.slova button:nth-child(3){ font-size:.88rem; }
.slova button:nth-child(4){ font-size:1rem; }
.slova button:hover{ background: var(--paper-2); }
.slova button[aria-pressed="true"]{ background: var(--ink); color:#fff; }

.hamburger{
  display:none; min-width: 2.75rem; min-height: 2.75rem;
  align-items:center; justify-content:center; gap:.4rem;
  padding:.5rem .8rem; background: transparent; border:1px solid var(--ink);
  color: var(--ink); font-weight:700; font-size:.82rem; cursor:pointer;
}


.brzi-kontakt{ display:none; }

.mob{ display:none; border-top:1px solid var(--line); background: var(--paper); padding: 1rem var(--gutter) 1.5rem; }
.mob[data-otvoren="da"]{ display:block; }
.mob a.mob__link{ display:flex; align-items:center; min-height:3.1rem; font-size:1.02rem; font-weight:600; color: var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.mob .slova{ display:flex; margin-top:1rem; width:max-content; }
.mob .gumb{ margin-top:1rem; width:100%; }

/* ============================================================
   HERO — puna fotografija, editorijalni naslov
   ============================================================ */
.hero{ position:relative; min-height: min(46rem, 92vh); display:flex; align-items:flex-end; color:#FFFDF8; }
.hero__slika{
  position:absolute; inset:0; z-index:0;
  background: url("https://images.pexels.com/photos/29372733/pexels-photo-29372733.jpeg?auto=compress&cs=tinysrgb&w=1800") center 28%/cover no-repeat;
}
.hero__slika::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(15,20,15,.86) 0%, rgba(15,20,15,.42) 55%, rgba(15,20,15,.12) 100%);
}
.hero__sadrzaj{ position:relative; z-index:1; padding-block: 3rem clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.hero__oznaka{ font-family: var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#E7E3D2; display:block; margin-bottom:1.1rem; }
.hero h1{ color:#FFFDF8; max-width: 30ch; }
.hero .vodeci{ color:#E4E1D4; max-width:38rem; margin-top:1.1rem; font-size:1.1rem; }
.hero__akcije{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.1rem; }

/* ============================================================
   MASTHEAD ČINJENICA — bez ikona, samo linije i tekst
   ============================================================ */
.cinjenice{ background: var(--pine-deep); color:#EFEDE2; }
.cinjenice__red{ display:grid; grid-template-columns: repeat(4,1fr); }
.cinjenica{ padding: 1.75rem 1.5rem; border-left: 1px solid rgba(239,237,226,.18); }
.cinjenica:first-child{ border-left:none; padding-left:0; }
.cinjenica strong{ display:block; font-family: var(--serif); font-size:1.05rem; margin-bottom:.35rem; color:#FFFDF8; font-weight:500; }
.cinjenica span{ font-size:.86rem; color:#C9C6B6; }

/* ============================================================
   USLUGE — asimetrični dvostupčani raspored, definicijska lista
   ============================================================ */
.usluge{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 1rem + 5vw, 5.5rem); align-items:start; }
.usluge--obrnuto{ direction: rtl; }
.usluge--obrnuto > *{ direction: ltr; }
.usluge--obrnuto > *:first-child{ order:2; }

.uvod-bloka{ max-width:34rem; margin-bottom: 2.25rem; }

.lista-usluga{ list-style:none; margin:0; padding:0; }
.lista-usluga li{ padding: 1.15rem 0; border-top: 1px solid var(--line); }
.lista-usluga li:last-child{ border-bottom: 1px solid var(--line); }
.lista-usluga b{ display:block; font-size:1.02rem; margin-bottom:.3rem; }
.lista-usluga span{ color: var(--ink-soft); font-size:.92rem; }

.slika-editorijalna{ overflow:hidden; }
.slika-editorijalna img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; }

/* ============================================================
   TAMNA TEMATSKA SEKCIJA — Parkinson / MS
   ============================================================ */
.tema-bg{ position:relative; color:#FFFDF8; }
.tema-bg__slika{ position:absolute; inset:0; z-index:0; background: url("https://images.pexels.com/photos/6647024/pexels-photo-6647024.jpeg?auto=compress&cs=tinysrgb&w=1800") center/cover no-repeat; }
.tema-bg__slika::after{ content:""; position:absolute; inset:0; background: rgba(16,22,17,.87); }
.tema-bg__sadrzaj{ position:relative; z-index:1; }
.tema-bg h2{ color:#FFFDF8; }
.tema-bg .oznaka-sekcije{ color:#D8B98A; }
.tema-bg .vodeci{ color:#DAD8C9; }
.teme-mreza{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2.5rem; }
.tema{ border-top: 1px solid rgba(255,253,248,.25); padding-top: 1.5rem; }
.tema h3{ color:#FFFDF8; margin-bottom:.85rem; }
.tema ul{ margin:0; padding:0; list-style:none; }
.tema li{ color:#D2D0C1; font-size:.94rem; padding: .55rem 0; border-top: 1px solid rgba(255,253,248,.12); }
.tema li:first-child{ border-top:none; padding-top:0; }

/* ============================================================
   DODATNE USLUGE — kompaktan redak, bez kartica
   ============================================================ */
.dodatne{ display:flex; flex-wrap:wrap; gap: .6rem 1rem; margin-top:1.75rem; }
.dodatne span{
  font-size:.86rem; font-weight:600; color: var(--ink-soft);
  border:1px solid var(--line-2); border-radius:999px; padding:.45rem 1rem;
}

/* ============================================================
   PROFIL — EMA ŠKARO
   ============================================================ */
.citat{
  font-family: var(--serif); font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem);
  line-height:1.4; color: var(--ink); font-weight:400; margin: 1.5rem 0;
  padding-left: 1.4rem; border-left: 3px solid var(--rust);
}

/* ============================================================
   ZAŠTO NAM VJERUJU — velike serifne brojke
   ============================================================ */
.razlozi{ display:grid; grid-template-columns: repeat(3,1fr); gap: 3rem 3rem; margin-top:1rem; }
.razlog{ border-top:1px solid var(--line); padding-top:1.4rem; }
.razlog .broj-veliki{ font-size:2.1rem; display:block; margin-bottom:.6rem; }
.razlog h3{ margin-bottom:.4rem; }
.razlog p{ margin:0; color: var(--ink-soft); font-size:.94rem; }

/* ============================================================
   DOSTUPNOST
   ============================================================ */
.dostupnost-red{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.75rem; padding: 1.75rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom: 3rem; }
.dostupnost-dani{ display:flex; gap:1.75rem; flex-wrap:wrap; }
.dostupnost-dani span{ font-size:.92rem; font-weight:600; color: var(--ink-faint); }
.dostupnost-dani span.radi{ color: var(--ink); }
.dostupnost-dani span.radi::before{ content:"● "; color: var(--rust); font-size:.6rem; }

.koraci{ display:grid; grid-template-columns: repeat(4,1fr); gap: 2.5rem; }
.korak{ border-top: 1px solid var(--line); padding-top:1.4rem; }
.korak h3{ margin-bottom:.4rem; }
.korak p{ margin:0; color: var(--ink-soft); font-size:.92rem; }

/* ============================================================
   CIJENE
   ============================================================ */
.cijene-red{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top:1.5rem; }
.cijene-red > div{ border-top: 2px solid var(--ink); padding-top:1.5rem; }
.cijene-red h3{ margin-bottom:.5rem; }
.cijene-red p{ color: var(--ink-soft); margin-bottom: .9rem; }
.popust{ display:inline-block; font-size:.82rem; font-weight:700; letter-spacing:.03em; color: var(--rust); border-bottom: 1px solid var(--rust); padding-bottom:.15rem; }

/* ============================================================
   KOME POMAŽEM
   ============================================================ */
.kome{ columns: 2; column-gap: 3rem; margin-top:.5rem; }
.kome__stavka{ break-inside: avoid; padding: 1.4rem 0; border-top:1px solid var(--line); }
.kome__stavka:last-child{ border-bottom:1px solid var(--line); }
.kome__stavka h3{ margin-bottom:.3rem; font-size:1rem; }
.kome__stavka p{ margin:0; font-size:.92rem; color: var(--ink-soft); }

/* ============================================================
   IZJAVE
   ============================================================ */
.izjave{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.izjava{ margin:0; font-family: var(--serif); font-size:1.05rem; color: var(--ink-faint); font-style:italic; border-top:1px solid var(--line); padding-top:1.25rem; }
.izjava footer{ font-family: var(--sans); font-style:normal; font-size:.8rem; font-weight:600; color: var(--ink-faint); margin-top: .8rem; }

/* ============================================================
   ČESTA PITANJA
   ============================================================ */
.pitanja{ max-width: 52rem; }
.pitanje{ border-bottom:1px solid var(--line); }
.pitanje:first-of-type{ border-top:1px solid var(--line); }
.pitanje summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height: 3.75rem; padding: 1.1rem 0; cursor:pointer; list-style:none;
  font-family: var(--serif); font-size:1.1rem; font-weight:500; color: var(--ink);
}
.pitanje summary::-webkit-details-marker{ display:none; }
.pitanje summary:hover{ color: var(--rust); }
.pitanje summary .znak{ flex:none; font-family: var(--sans); font-size:1.3rem; font-weight:300; color: var(--ink-faint); transition: transform .25s var(--ease); }
.pitanje[open] summary .znak{ transform: rotate(45deg); color: var(--rust); }
.pitanje__odgovor{ padding: 0 0 1.5rem; max-width:44rem; }
.pitanje__odgovor p:last-child{ margin-bottom:0; }

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt{ background: var(--pine-deep); color:#EDEBDE; }
.kontakt h2{ color:#FFFDF8; }
.kontakt .oznaka-sekcije{ color:#D8B98A; }
.kontakt .vodeci{ color:#C9C6B6; }
.kontakt .gumb--puni{ background: var(--rust); color:#FFFDF8; }
.kontakt .gumb--puni:hover,.kontakt .gumb--puni:focus-visible{ background:#B26A40; }
.kontakt__mreza{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items:start; margin-top: 2.5rem; }

.polje{ margin-bottom:1.5rem; }
.polje label{ display:block; font-weight:600; margin-bottom:.4rem; font-size:.9rem; color:#EDEBDE; }
.polje .pomoc{ display:block; font-weight:400; font-size:.8rem; color:#9A9887; margin-top:-.15rem; margin-bottom:.5rem; }
.polje input,.polje textarea{
  width:100%; min-height: 2.9rem; padding:.7rem 0;
  font-family: var(--sans); font-size:1rem; color:#FFFDF8;
  background: transparent; border:none; border-bottom:1px solid rgba(237,235,222,.35); border-radius:0;
  transition: border-color .2s var(--ease);
}
.polje textarea{ min-height: 6rem; resize: vertical; }
.polje input::placeholder,.polje textarea::placeholder{ color:#7C7A6A; }
.polje input:focus-visible,.polje textarea:focus-visible{ border-color:#FFFDF8; outline:none; }
.polje input[aria-invalid="true"],.polje textarea[aria-invalid="true"]{ border-color:#D98B6A; }
.greska{ display:none; margin-top:.5rem; color:#E7A688; font-size:.84rem; font-weight:600; }
.greska[data-vidljiva="da"]{ display:block; }
.obrazac__status{ margin-top:1.2rem; padding:.9rem 0; color:#D8B98A; font-weight:600; display:none; border-top:1px solid rgba(237,235,222,.25); }
.obrazac__status[data-vidljiv="da"]{ display:block; }
.privola{ display:flex; gap:.7rem; align-items:flex-start; font-size:.84rem; color:#B4B2A0; }
.privola input{ width:1.2rem; height:1.2rem; min-height:1.2rem; flex:none; margin-top:.15rem; accent-color: var(--rust); }

.kontakt__podaci{ display:grid; gap:2rem; }
.kontakt__stavka{ border-top: 1px solid rgba(237,235,222,.2); padding-top:1.2rem; }
.kontakt__stavka h3{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#9A9887; margin-bottom:.6rem; font-family: var(--sans); }
.tel-veliki{ display:inline-flex; align-items:center; gap:.6rem; font-family: var(--serif); font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); font-weight:500; color:#FFFDF8; text-decoration:none; }
.tel-veliki:hover{ color: var(--rust); }
.mail-veliki{ font-size:1rem; font-weight:600; color:#EDEBDE; word-break: break-word; }
.radno{ list-style:none; padding:0; margin:0; }
.radno li{ display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; font-size:.94rem; color:#D5D3C3; }
.radno li strong{ color:#FFFDF8; }
.karta{ margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); border:1px solid rgba(237,235,222,.25); }
.karta iframe{ display:block; width:100%; height:20rem; border:0; filter: grayscale(.2) contrast(1.05); }
.karta__opis{ padding: 1rem 0 0; font-size:.86rem; color:#9A9887; }

/* ============================================================
   PODNOŽJE
   ============================================================ */
.podnozje{ background: var(--ink); color:#DAD8CC; padding-block: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); }
.podnozje a{ color:#DAD8CC; }
.podnozje a:hover{ color: var(--rust); }
.podnozje__mreza{ display:grid; grid-template-columns: 1.3fr .8fr .8fr; gap:2.5rem; }
.podnozje h3{ font-family: var(--serif); color:#FFFDF8; font-size:1.1rem; margin-bottom:.75rem; font-weight:500; }
.podnozje p,.podnozje li{ font-size:.88rem; color:#A9A79A; }
.podnozje ul{ list-style:none; padding:0; margin:0; }
.podnozje li{ margin-bottom:.55em; }
.podnozje .ph{ background:#4A4535; border-bottom-color:#C79B4E; color:#F6E7C8; }
.podnozje__dno{ margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid #33312A; display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; font-size:.8rem; color:#8B8977; }
.podnozje .tel-veliki{ color:#DAD8CC; font-size:1.25rem; }
.podnozje .tel-veliki:hover{ color: var(--rust); }

/* ============================================================
   POMOĆNE KLASE (umjesto inline stilova)
   ============================================================ */
.bez-paddinga{ padding-block:0; }
.bez-margine{ margin:0; }
.pozadina-2{ background: var(--paper-2); }
.usluge--sredina{ align-items:center; }
.neobavezno{ font-weight:400; color:#9A9887; }
.polje .privola__tekst{ font-weight:400; }
.greska--privola{ margin-top:-1rem; }
.gumb--posalji{ width:100%; margin-top:.5rem; }
.podrucje{ margin:0; color:#D5D3C3; }
.podnozje__pravno{ margin-top:1.1rem; }

/* Razmak između naslova i uvodnog teksta */
h2 + p,
h2 + .vodeci{ margin-top: 1rem; }

/* ============================================================
   RESPONZIVNO — TABLET (do 1240px)
   ============================================================ */
@media (max-width: 1240px){
  .izbornik{ display:none; }
  .traka__desno{ margin-left:auto; }
  .traka__desno .gumb{ display:none; }
  .hamburger{ display:inline-flex; }
}

@media (max-width: 920px){
  .usluge{ grid-template-columns:1fr; gap: 2.5rem; }
  .usluge > .slika-editorijalna{ order:-1; }
  .usluge--obrnuto > *:first-child{ order:-1; }
  .slika-editorijalna img{ aspect-ratio: 16/10; }
}

@media (max-width: 900px){
  .cinjenice__red{ grid-template-columns: repeat(2,1fr); gap: 1.75rem 2rem; padding-block: 2rem; }
  .cinjenica,
  .cinjenica:first-child{ border:none; padding:0; }

  .razlozi{ grid-template-columns: repeat(2,1fr); gap: 2.5rem 2rem; }
  .koraci{ grid-template-columns: repeat(2,1fr); gap: 2rem; }
  .izjave{ grid-template-columns:1fr; gap: 1.5rem; }
  .kontakt__mreza{ grid-template-columns:1fr; }
}

/* ============================================================
   RESPONZIVNO — MOBITEL (do 720px)
   Sve sekcije redom, od vrha do dna.
   ============================================================ */
@media (max-width: 720px){

  /* ---------- Općenito ---------- */
  :root{ --gutter: 1.25rem; }
  html{ scroll-padding-top: 4.75rem; }
  body{
    font-size: 1rem;
    overflow-x: clip;
    padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)); /* mjesto za traku "Brzi kontakt" */
  }
  section{ padding-block: 3.5rem; }
  p{ max-width: none; }
  h1{ font-size: 2.2rem; line-height: 1.08; }
  h2{ font-size: 1.8rem; line-height: 1.15; }
  h3{ font-size: 1.05rem; }
  .vodeci{ font-size: 1.05rem; max-width: none; }
  .oznaka-sekcije{ font-size: .68rem; margin-bottom: .75rem; }
  .uvod-bloka{ margin-bottom: 1.75rem; }
  .ph{ white-space: normal; }
  .gumb{ min-height: 3.25rem; }

  /* ---------- Navigacija ---------- */
  .traka__red{ gap: .6rem; padding-block: .6rem; }
  .wordmark{ gap: .6rem; }
  .wordmark__znak{ width: 2.35rem; height: 2.35rem; font-size: .95rem; }
  .wordmark__tekst{ font-size: 1.08rem; }
  .wordmark__pod{ font-size: .56rem; letter-spacing: .08em; }
  .traka__desno{ gap: .5rem; }
  .traka__desno .slova{ display:none; }
  .tel-traka{
    width: 2.75rem; height: 2.75rem; justify-content:center;
    border: 1px solid var(--line-2); border-radius: 50%;
  }
  .tel-traka .oznaka{ display:none; }
  .hamburger{ min-height: 2.75rem; padding: .5rem .75rem; border-radius: var(--r-s); }

  .mob{
    padding: .5rem var(--gutter) 1.5rem;
    max-height: calc(100svh - 3.9rem); overflow-y: auto;
    box-shadow: 0 18px 30px -18px rgba(28,27,23,.35);
  }
  .mob a.mob__link{ min-height: 3.4rem; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
  .mob .slova{ margin-top: 1.25rem; }
  .mob .slova button{ min-width: 2.5rem; min-height: 2.5rem; }
  .mob .gumb{ margin-top: 1.25rem; }

  /* ---------- Hero ---------- */
  .hero{ min-height: min(40rem, 86svh); }
  .hero__slika{ background-position: 30% 30%; }
  .hero__slika::after{
    background: linear-gradient(0deg, rgba(15,20,15,.92) 0%, rgba(15,20,15,.62) 50%, rgba(15,20,15,.2) 100%);
  }
  .hero__sadrzaj{ padding-block: 6rem 2.25rem; }
  .hero__oznaka{ font-size: .68rem; margin-bottom: .9rem; }
  .hero .vodeci{ font-size: 1.02rem; margin-top: 1rem; }
  .hero__akcije{ flex-direction: column; gap: .75rem; margin-top: 1.75rem; }
  .hero__akcije .gumb{ width: 100%; }

  /* ---------- Činjenice ---------- */
  .cinjenice__red{ gap: 1.5rem 1.25rem; padding-block: 1.9rem; }
  .cinjenica strong{ font-size: 1rem; margin-bottom: .2rem; }
  .cinjenica span{ font-size: .82rem; line-height: 1.5; display:block; }

  /* ---------- Njega / Čišćenje / Ema — slika preko cijele širine ---------- */
  .usluge{ gap: 2rem; }
  .slika-editorijalna{ margin-inline: calc(-1 * var(--gutter)); }
  .slika-editorijalna img{ aspect-ratio: 4/3; }
  .lista-usluga li{ padding: 1rem 0; }
  .lista-usluga b{ font-size: 1rem; margin-bottom: .2rem; }
  .lista-usluga span{ font-size: .9rem; line-height: 1.55; display:block; }

  .dodatne{ gap: .5rem; margin-top: 1.5rem; }
  .dodatne span{ font-size: .8rem; padding: .4rem .85rem; }

  /* ---------- Parkinson / MS ---------- */
  .teme-mreza{ grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
  .tema li{ font-size: .92rem; }

  /* ---------- O meni ---------- */
  .citat{ font-size: 1.3rem; padding-left: 1rem; margin: 1.25rem 0; }

  /* ---------- Povjerenje — broj lijevo, tekst desno ---------- */
  .razlozi{ grid-template-columns: 1fr; gap: 0; margin-top: 0; }
  .razlog{
    display: grid; grid-template-columns: 2.75rem 1fr; column-gap: .75rem;
    padding: 1.25rem 0;
  }
  .razlog:last-child{ border-bottom: 1px solid var(--line); }
  .razlog .broj-veliki{ grid-row: span 2; font-size: 1.6rem; margin: 0; line-height: 1.1; }
  .razlog h3{ margin-bottom: .25rem; }
  .razlog p{ font-size: .9rem; }

  /* ---------- Dostupnost i koraci ---------- */
  .dostupnost-red{ flex-direction: column; align-items: stretch; gap: 1.25rem; padding: 1.25rem 0; margin-bottom: 2rem; }
  .dostupnost-dani{ display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
  .dostupnost-dani span{ font-size: .88rem; }
  .dostupnost-red .gumb{ width: 100%; }

  .koraci{ grid-template-columns: 1fr; gap: 0; counter-reset: none; }
  .korak{ padding: 1.1rem 0; }
  .korak:last-child{ border-bottom: 1px solid var(--line); }
  .korak p{ font-size: .9rem; }

  /* ---------- Cijene ---------- */
  .cijene-red{ grid-template-columns: 1fr; gap: 2rem; margin-top: .5rem; }
  .cijene-red > div{ padding-top: 1.25rem; }

  /* ---------- Kome pomažem ---------- */
  .kome{ columns: 1; }
  .kome__stavka{ padding: 1.1rem 0; }

  /* ---------- Izjave ---------- */
  .izjava{ font-size: 1rem; }

  /* ---------- Česta pitanja ---------- */
  .pitanje summary{ font-size: 1.05rem; gap: 1rem; padding: 1rem 0; min-height: 3.5rem; line-height: 1.3; }
  .pitanje__odgovor{ padding-bottom: 1.25rem; font-size: .95rem; }

  /* ---------- Kontakt — telefon prvi, obrazac ispod ---------- */
  .kontakt__mreza{ gap: 2.5rem; margin-top: 2rem; }
  .kontakt__podaci{ order: -1; gap: 1.5rem; }
  .tel-veliki{ font-size: 1.75rem; }
  .radno li{ font-size: .9rem; }
  .polje{ margin-bottom: 1.25rem; }
  .polje input,
  .polje textarea{ font-size: 1rem; } /* ≥16px — iOS ne zumira pri unosu */
  .karta{ margin-top: 2.5rem; margin-inline: calc(-1 * var(--gutter)); border-inline: none; }
  .karta iframe{ height: 15rem; }
  .karta__opis{ padding: 1rem var(--gutter) 0; }

  /* ---------- Podnožje ---------- */
  .podnozje{ padding-block: 2.75rem 1.5rem; }
  .podnozje__mreza{ grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .podnozje__mreza > :first-child{ grid-column: 1 / -1; }
  .podnozje__dno{ margin-top: 2rem; font-size: .78rem; }

  /* ---------- Brzi kontakt — traka pri dnu ekrana ---------- */
  .brzi-kontakt{
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--pine-deep);
    border-top: 1px solid rgba(239,237,226,.18);
  }
  .brzi-kontakt a{
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3.75rem;
    font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #FFFDF8; text-decoration: none;
  }
  .brzi-kontakt__poziv{ background: var(--rust); }
  .brzi-kontakt a:active{ opacity: .85; }
}

/* ============================================================
   RESPONZIVNO — MALI MOBITELI (do 380px)
   ============================================================ */
@media (max-width: 380px){
  h1{ font-size: 1.95rem; }
  h2{ font-size: 1.6rem; }
  .wordmark__pod{ display: none; }
  .hamburger{ padding-inline: .6rem; font-size: .78rem; }
  .cinjenice__red{ grid-template-columns: 1fr; }
  .dostupnost-dani{ grid-template-columns: 1fr; }
  .podnozje__mreza{ grid-template-columns: 1fr; }
}