/* ============================================================
   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; }
.gumb--veliki{ min-height: 3.9rem; padding: 0 2rem; font-size: .95rem; letter-spacing:.06em; }
.gumb--hrda{ background: var(--rust); color:#FFFDF8; }
.gumb--hrda:hover,.gumb--hrda:focus-visible{ background:#B26A40; color:#FFFDF8; }
.gumb--papir{ background:#FFFDF8; color: var(--ink); }
.gumb--papir:hover,.gumb--papir:focus-visible{ background: var(--paper-2); color: var(--ink); }
.gumb span[aria-hidden="true"]{ transition: transform .2s var(--ease); }
.gumb:hover span[aria-hidden="true"]{ transform: translateX(3px); }

.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{ display:block; height:2.75rem; width:auto; 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); }
.izbornik a[aria-current="page"]{ color: var(--ink); border-color: var(--rust); }
.mob a.mob__link[aria-current="page"]{ 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("../images/njega-hero.3acfb3cb6a4f.jpg") center 35%/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__slika--ciscenje{
  /* Krpa, rukavice i sprej na tamnom drvu — predmeti desno, lijevo mjesto za tekst */
  background-image: url("../images/hero.9cffdb7084d2.jpg");
  background-position: center center;
}
.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; }

.slika-editorijalna--portret img{ object-position: 50% 22%; }
/* O meni — manja fotografija, više mjesta za tekst */
.usluge--ema{ grid-template-columns: minmax(0, 22rem) 1fr; align-items:start; }
.usluge--ema .slika-editorijalna--portret{ border-radius: var(--r-m); position: sticky; top: 6.5rem; }
.ema__podnaslov{ margin: 1.75rem 0 .5rem; }
/* Cijeli plakat — bez obrezivanja, na svim veličinama ekrana */
.slika-editorijalna--plakat{ border-radius: var(--r-m); box-shadow: 0 18px 40px -24px rgba(28,27,23,.45); }
.slika-editorijalna.slika-editorijalna--plakat img{ height:auto; aspect-ratio: auto; object-fit: contain; }

/* Slika koja prati skrolanje dok se čita popis usluga */
@media (min-width: 921px){
  .slika-editorijalna--prati{ position: sticky; top: 6.5rem; }
}

/* Čišćenje (02) — fotografije prije i poslije umjesto jedne slike */
.ciscenje-slike{ display:grid; gap: 1rem; }
.ciscenje-slike__opis{ margin:0; font-size:.86rem; font-weight:600; color: var(--ink-faint); }
.prije-poslije__slika{ position:relative; margin:0; overflow:hidden; border-radius: var(--r-m); }
.prije-poslije__slika img{ display:block; width:100%; height:auto; aspect-ratio: 5/4; object-fit:cover; }
.prije-poslije__slika figcaption{
  position:absolute; left:.75rem; top:.75rem;
  background: var(--ink); color:#FFFDF8; border-radius: var(--r-s);
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.35rem .7rem;
}
.prije-poslije__slika--poslije figcaption{ background: var(--rust); }

/* ============================================================
   TAMNA TEMATSKA SEKCIJA — Parkinson / MS
   ============================================================ */
.tema-bg{ position:relative; color:#FFFDF8; }
.tema-bg__slika{ position:absolute; inset:0; z-index:0; background: url("../images/njega-tema.9f5ba47ed23a.jpg") 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; }

.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; }

/* ============================================================
   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); }

/* ============================================================
   POVEZNICA NA DRUGU USLUGU (njega ↔ čišćenje)
   ============================================================ */
.druga-usluga{ padding-block: clamp(2.75rem, 2rem + 2.5vw, 4rem); background: var(--paper-2); }
.druga-usluga__red{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 1.25rem 3rem; }
.druga-usluga .vodeci{ margin-bottom:0; }

/* ============================================================
   NAŠI RADOVI (čišćenje) — prije / poslije + traka fotografija
   ============================================================ */
.radovi{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 2.5rem; }
.rad h3{ margin-bottom: 1rem; }
.rad__par{ display:grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.rad .prije-poslije__slika img{ aspect-ratio: 4/5; }
.radovi__podnaslov{ margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 1rem; }
.radovi__traka{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.radovi__slika{ margin:0; }
.radovi__slika img{ display:block; width:100%; height:auto; aspect-ratio: 1/1; object-fit:cover; border-radius: var(--r-m); }
.radovi__slika figcaption{ margin-top:.5rem; font-size:.84rem; color: var(--ink-soft); }

/* Istaknuto — klizač prije / poslije + tekst */
.radovi-istaknuto{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items:center; margin-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.radovi-istaknuto__tekst h3{ font-family: var(--serif); font-weight:500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 1rem; }
.radovi-istaknuto__tekst p{ color: var(--ink-soft); }
.radovi-istaknuto__popis{ list-style:none; margin: 0 0 1.75rem; padding:0; display:grid; gap:.55rem; }
.radovi-istaknuto__popis li{ display:flex; align-items:center; gap:.6rem; font-weight:600; }
.radovi-istaknuto__popis li::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background: var(--rust); flex:none; }

.usporedba{
  --pozicija: 50%;
  position:relative; margin:0; overflow:hidden; border-radius: var(--r-m);
  aspect-ratio: 4/5; max-height: 42rem; justify-self: center; width:100%;
  box-shadow: 0 24px 50px -30px rgba(28,27,23,.55); user-select:none;
}
.usporedba__slika{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.usporedba__slika--prije{ clip-path: inset(0 calc(100% - var(--pozicija)) 0 0); }
.usporedba__oznaka{
  position:absolute; top:.9rem; z-index:2; padding:.35rem .75rem; border-radius: var(--r-s);
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#FFFDF8;
}
.usporedba__oznaka--prije{ left:.9rem; background: var(--ink); }
.usporedba__oznaka--poslije{ right:.9rem; background: var(--rust); }
.usporedba__crta{
  position:absolute; top:0; bottom:0; left: var(--pozicija); z-index:2; width:3px; margin-left:-1.5px;
  background:#FFFDF8; box-shadow: 0 0 12px rgba(0,0,0,.35); pointer-events:none;
}
.usporedba__rucka{
  position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
  display:grid; place-items:center; width:3.1rem; height:3.1rem; border-radius:50%;
  background:#FFFDF8; color: var(--ink); font-weight:700; font-size:1rem; letter-spacing:.1em;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.usporedba__klizac{
  position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0;
  opacity:0; cursor: pointer; -webkit-appearance:none; appearance:none; touch-action: pan-y;
}
.usporedba:has(.usporedba__klizac:focus-visible){ outline: 2px solid var(--rust); outline-offset: 4px; }

/* Galerija — klik na fotografiju otvara uvećani prikaz */
[data-galerija] img{ cursor: pointer; transition: filter .2s var(--ease); }
[data-galerija] img:hover{ filter: brightness(1.06); }

.povecanje{
  width:100%; max-width:100%; height:100%; max-height:100%; margin:0; padding: 3.5rem 5rem;
  border:none; background: rgba(16,18,15,.95); color:#FFFDF8;
}
.povecanje[open]{ display:flex; align-items:center; justify-content:center; }
.povecanje::backdrop{ background: rgba(16,18,15,.6); }
.povecanje__okvir{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.povecanje__slika{ max-width:100%; max-height: calc(100svh - 9rem); object-fit:contain; border-radius: var(--r-m); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.povecanje__opis{ font-size:.9rem; color:#DAD8C9; text-align:center; }
.povecanje__zatvori,
.povecanje__strelica{
  position:absolute; display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%;
  border:1px solid rgba(255,253,248,.35); background: rgba(255,253,248,.08); color:#FFFDF8;
  font-size:1.9rem; line-height:1; cursor:pointer;
}
.povecanje__zatvori:hover,.povecanje__strelica:hover{ background: rgba(255,253,248,.2); }
.povecanje__zatvori{ top:1rem; right:1rem; }
.povecanje__strelica{ top:50%; transform: translateY(-50%); }
.povecanje__strelica--lijevo{ left:1rem; }
.povecanje__strelica--desno{ right:1rem; }

/* ============================================================
   RECENZIJE — upisuju se u Django adminu
   ============================================================ */
.recenzije__napomena{
  margin: -.75rem 0 1.25rem; padding:.6rem .9rem; font-size:.84rem; font-weight:600;
  background:#F6E7C8; border-left:3px solid var(--rust); color: var(--ink); max-width:none;
}

/* Vrtuljak — kartice se same izmjenjuju (dom-i-briga.js) */
.vrtuljak{ margin-bottom: 2rem; }
.vrtuljak__traka{
  --po-ekranu: 3; --razmak: 1.25rem;
  display:flex; gap: var(--razmak); overflow-x:auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: .25rem .1rem 1rem; scrollbar-width: none;
}
.vrtuljak__traka::-webkit-scrollbar{ display:none; }
.vrtuljak__traka > .recenzija{
  flex: 0 0 calc((100% - (var(--po-ekranu) - 1) * var(--razmak)) / var(--po-ekranu));
  scroll-snap-align: start;
}
.vrtuljak__kontrole{ display:flex; justify-content:flex-end; gap:.5rem; }
.vrtuljak__gumb{
  display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:50%;
  border:1px solid var(--line-2); background: var(--card); color: var(--ink); font-size:1.1rem; cursor:pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.vrtuljak__gumb:hover,.vrtuljak__gumb:focus-visible{ background: var(--ink); border-color: var(--ink); color:#FFFDF8; }
.recenzija--primjer{ border-style: dashed; }
.recenzija{
  margin:0; display:flex; flex-direction:column; gap: .9rem;
  background: var(--card); border:1px solid var(--line); border-radius: var(--r-m);
  padding: 1.5rem; box-shadow: 0 10px 30px -22px rgba(28,27,23,.4);
}
.recenzija__zvjezdice{ display:flex; gap:.15rem; font-size:1.05rem; line-height:1; }
.zvjezdica{ color: var(--line-2); }
.zvjezdica--puna{ color: #C9922E; }
.recenzija__tekst{ margin:0; flex:1; font-family: var(--serif); font-size:1.08rem; line-height:1.5; color: var(--ink); }
.recenzija__autor{ display:flex; flex-direction:column; font-size:.88rem; }
.recenzija__autor span{ color: var(--ink-faint); }
.recenzije__poziv{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 1rem 2rem;
  padding: 1.5rem 1.75rem; border:1px dashed var(--line-2); border-radius: var(--r-m); background: var(--card);
}
.recenzije__poziv p{ margin:0; color: var(--ink-soft); max-width: 52ch; }

/* ============================================================
   PODRUČJE RADA + LOKALNE STRANICE (SEO)
   ============================================================ */
.podrucja{ padding-block: clamp(2.75rem, 2rem + 2.5vw, 4rem); }
.podrucja__popis{ list-style:none; margin: 1.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.podrucja__popis a{
  display:inline-flex; align-items:center; gap:.5rem; min-height: 2.75rem; padding: .5rem 1.1rem;
  border:1px solid var(--line-2); border-radius:999px; background: var(--card);
  font-weight:600; font-size:.92rem; color: var(--ink); text-decoration:none;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.podrucja__popis a::before{ content:""; width:.45rem; height:.45rem; border-radius:50%; background: var(--rust); }
.podrucja__popis a:hover{ background: var(--ink); border-color: var(--ink); color:#FFFDF8; }

.mrvice{ display:flex; gap:.5rem; font-size:.84rem; color: var(--ink-faint); margin-bottom: 1.25rem; }
.mrvice a{ color: var(--ink-soft); }
.mrvice--svijetle, .mrvice--svijetle a{ color:#DAD8C9; }

/* Hero lokalne stranice — ista fotografija kao početna, nešto niži */
.hero--lokacija{ min-height: min(40rem, 86vh); }
.hero--lokacija h1{ max-width: 20ch; }

/* Kartice usluga sa slikom */
.lok-usluge{ background: var(--paper-2); }
.lok-usluge__mreza{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.lok-kartica{
  display:flex; flex-direction:column; overflow:hidden; background: var(--card);
  border:1px solid var(--line); border-radius: 10px;
  box-shadow: 0 22px 44px -30px rgba(28,27,23,.5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lok-kartica:hover{ transform: translateY(-4px); box-shadow: 0 30px 56px -30px rgba(28,27,23,.55); }
.lok-kartica__slika{ position:relative; aspect-ratio: 16/10; overflow:hidden; }
.lok-kartica__slika img{ display:block; width:100%; height:100%; object-fit:cover; object-position: center 30%; }
.lok-kartica__oznaka{
  position:absolute; left:1rem; top:1rem; padding:.4rem .8rem; border-radius: var(--r-s);
  background: var(--rust); color:#FFFDF8; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.lok-kartica__oznaka--tamna{ background: var(--pine-deep); }
.lok-kartica__tijelo{ display:flex; flex-direction:column; flex:1; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.lok-kartica__tijelo h2{ font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); margin-bottom: .75rem; }
.lok-kartica__tijelo p{ color: var(--ink-soft); }

/* Pločice usluga (lokalne stranice čišćenja) */
.lok-plocice{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.lok-plocica{
  position:relative; background: var(--card); border:1px solid var(--line); border-radius: 10px;
  padding: 1.6rem 1.5rem 1.5rem; border-top: 3px solid var(--rust);
  box-shadow: 0 16px 36px -28px rgba(28,27,23,.5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lok-plocica:hover{ transform: translateY(-3px); box-shadow: 0 24px 44px -28px rgba(28,27,23,.55); }
.lok-plocica__broj{ display:block; font-family: var(--serif); font-size: 1.9rem; line-height:1; color: var(--line-2); margin-bottom: .75rem; }
.lok-plocica h3{ margin-bottom: .4rem; }
.lok-plocica p{ margin:0; font-size:.92rem; color: var(--ink-soft); }

/* Upoznajte Emu — tamna traka */
.lok-ema{ background: var(--pine-deep); color:#EDEBDE; }
.lok-ema h2{ color:#FFFDF8; }
.lok-ema .oznaka-sekcije{ color:#D8B98A; }
.lok-ema .vodeci{ color:#C9C6B6; max-width: 52ch; }
.lok-ema__red{ display:grid; grid-template-columns: 15rem 1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items:center; }
.lok-ema__slika{
  display:block; width:100%; height:auto; aspect-ratio: 4/5; object-fit:cover; object-position: 50% 22%;
  border-radius: 10px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.6);
}
.tekst-link--svijetli{ color:#FFFDF8; border-color:#FFFDF8; }
.tekst-link--svijetli:hover{ color:#D8B98A; border-color:#D8B98A; }
.lokacija__popis{ list-style:none; margin: 0 0 1.75rem; padding:0; display:grid; gap:.5rem; flex:1; }
.lokacija__popis li{ display:flex; gap:.6rem; align-items:baseline; font-weight:600; font-size:.95rem; }
.lokacija__popis li::before{ content:"✓"; color: var(--rust); font-weight:700; }
.lokacija__akcije{ display:flex; flex-wrap:wrap; align-items:center; gap: .75rem 1.25rem; }
.lokacija__tel{ font-weight:700; color: var(--ink); text-decoration:none; }
.lokacija__tel:hover{ color: var(--rust); }
.podnozje__podnaslov{ margin-top: 1.75rem !important; }

/* ============================================================
   Č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; }
.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 — svijetlo, s logom bez pozadine
   ============================================================ */
.podnozje{
  position:relative; color: var(--ink-soft);
  background: linear-gradient(180deg, #FFFDF8 0%, var(--paper) 100%);
  border-top: 4px solid var(--rust);
  padding-block: clamp(3rem, 2.25rem + 2.5vw, 4.5rem) 0;
}
.podnozje a{ color: var(--ink); text-decoration:none; }
.podnozje a:hover{ color: var(--rust); }

.podnozje__vrh{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 2rem 3rem;
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); border-bottom: 1px solid var(--line);
}
.podnozje__logo{ display:block; flex:none; }
.podnozje__logo img{ display:block; width: clamp(12rem, 9rem + 8vw, 16.5rem); height:auto; }
.podnozje__poziv{ display:flex; flex-direction:column; align-items:flex-end; gap: 1rem; text-align:right; }
.podnozje .podnozje__slogan{
  margin:0; max-width: 24ch; text-wrap: balance; font-family: var(--serif); font-weight:400; line-height:1.25;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); color: var(--ink);
}
.podnozje .gumb--puni,
.podnozje .gumb--puni:hover{ color:#FFFDF8; }

.podnozje__mreza{
  display:grid; grid-template-columns: 1.4fr 1fr 1.2fr .9fr; gap: 2.5rem;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.podnozje h3{
  margin: 0 0 1rem; font-family: var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color: var(--rust);
}
.podnozje p{ margin:0; font-size:.92rem; line-height:1.65; }
.podnozje ul{ list-style:none; margin:0; padding:0; }

.podnozje__linkovi li{ margin-bottom:.6rem; }
.podnozje__linkovi a{
  font-size:.95rem; font-weight:500;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .25s var(--ease), color .2s var(--ease);
}
.podnozje__linkovi a:hover{ background-size: 100% 1px; }

.podnozje__kontakt li{ display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem; font-size:.95rem; }
.podnozje__kontakt svg{ flex:none; color: var(--rust); }
.podnozje__kontakt a{ font-weight:600; }

.podnozje__mreze{ display:flex; gap:.6rem; }
.podnozje__mreza-gumb{
  display:grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:50%;
  border:1px solid var(--line-2); background:#FFFDF8;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.podnozje .podnozje__mreza-gumb:hover{ background: var(--ink); border-color: var(--ink); color:#FFFDF8; transform: translateY(-2px); }

.podnozje__dno{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 2rem;
  padding-block: 1.4rem; border-top: 1px solid var(--line);
  font-size:.8rem; color: var(--ink-faint);
}
.podnozje__dno p{ font-size:.8rem; }
.podnozje__izrada a{ font-weight:700; color: var(--ink-soft); }
.podnozje__izrada a:hover{ color: var(--rust); }
.podnozje__obrt{ color: var(--ink-soft); }
.podnozje .podnozje__gore{ font-weight:700; font-size:.8rem; letter-spacing:.04em; color: var(--ink-soft); }
.podnozje .podnozje__gore: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; }
.podrucje--napomena{ margin-top:.4rem; font-size:.86rem; color:#9A9887; }
.podrucje--napomena a{ color:#EDEBDE; font-weight:600; }
.obrt{ display:grid; grid-template-columns: auto 1fr; gap:.35rem 1.25rem; margin:0; font-size:.92rem; }
.obrt dt{ color:#9A9887; }
.obrt dd{ margin:0; color:#EDEBDE; font-weight:600; }

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

/* ============================================================
   RESPONZIVNO — TABLET (do 1100px)
   ============================================================ */
@media (max-width: 1100px){
  .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; }
  .slika-editorijalna--portret{ max-width: 22rem; }
  .usluge--ema .slika-editorijalna--portret{ position: static; }
  .slika-editorijalna--plakat{ max-width: 36rem; }
  .slika-editorijalna--portret img{ aspect-ratio: 4/5; }

  .ciscenje-slike{ grid-template-columns: 1fr 1fr; }
  .ciscenje-slike__opis{ grid-column: 1 / -1; }
  .prije-poslije__slika img{ aspect-ratio: 1/1; }
}

@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; }
  .kontakt__mreza{ grid-template-columns:1fr; }
  .radovi{ grid-template-columns: 1fr; }
  .radovi__traka{ grid-template-columns: repeat(3, 1fr); }
  .radovi-istaknuto{ grid-template-columns: 1fr; }
  .lok-usluge__mreza{ grid-template-columns: 1fr; }
  .lok-plocice{ grid-template-columns: 1fr 1fr; }
  .lok-ema__red{ grid-template-columns: 11rem 1fr; }
  .usporedba{ max-width: 34rem; }
  .vrtuljak__traka{ --po-ekranu: 2; }
  .podnozje__mreza{ grid-template-columns: 1fr 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{ height: 2.2rem; }
  .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-width: 2.75rem; min-height: 2.75rem; padding: .5rem; border-radius: var(--r-s); flex:none; }
  .hamburger__tekst{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path: inset(50%); white-space:nowrap; } /* ostaje za čitače ekrana */

  .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--ciscenje{ background-position: 72% center; }
  .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; }

  .slika-editorijalna--portret{ max-width: 17rem; margin-inline: 0; }
  .slika-editorijalna--plakat{ margin-inline: 0; max-width:none; }
  .slika-editorijalna--portret img{ aspect-ratio: 4/5; }

  .ciscenje-slike{ gap: .75rem; }
  .prije-poslije__slika figcaption{ left:.5rem; top:.5rem; font-size:.66rem; }

  /* ---------- 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-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; }


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




  /* ---------- Naši radovi / recenzije ---------- */
  .povecanje{ padding: 4rem .75rem 5.5rem; }
  .povecanje__strelica{ top:auto; bottom:1rem; transform:none; }
  .povecanje__strelica--lijevo{ left: calc(50% - 3.5rem); }
  .povecanje__strelica--desno{ right: calc(50% - 3.5rem); }
  .radovi{ gap: 2rem; }
  .radovi__traka{ grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .radovi-istaknuto{ gap: 1.75rem; margin-bottom: 2.5rem; }
  .radovi-istaknuto__tekst .gumb{ width:100%; }
  .lokacija__akcije .gumb{ width:100%; }
  .lok-ema__red{ grid-template-columns: 1fr; }
  .lok-plocice{ grid-template-columns: 1fr; gap: .9rem; }
  .lok-ema__slika{ max-width: 13rem; }
  .podrucja__popis a{ width:100%; }
  .vrtuljak__traka{ --po-ekranu: 1.15; --razmak: .85rem; }
  .recenzije__poziv{ padding: 1.25rem; }
  .recenzije__poziv .gumb{ width:100%; }

  /* ---------- Poveznica na drugu uslugu ---------- */
  .druga-usluga{ padding-block: 2.75rem; }
  .druga-usluga .gumb{ width:100%; }

  /* ---------- Č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; }
  .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-top: 2.75rem; }
  .podnozje__vrh{ flex-direction:column; align-items:flex-start; gap: 1.5rem; }
  .podnozje__logo img{ width: 13rem; }
  .podnozje__poziv{ align-items:stretch; text-align:left; width:100%; }
  .podnozje .podnozje__slogan{ font-size: 1.45rem; }
  .podnozje__poziv .gumb{ width:100%; }
  .podnozje__mreza{ grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .podnozje__stupac--o-nama{ grid-column: 1 / -1; }
  .podnozje__dno{ flex-direction:column; align-items:flex-start; gap:.6rem; }

  /* ---------- 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; }
  .wordmark__znak{ height: 1.9rem; }
  .cinjenice__red{ grid-template-columns: 1fr; }
  .podnozje__mreza{ grid-template-columns: 1fr; }
}