/* ===========================================================================
   Dental Naturalis — stil sajta
   Učitava se POSLIJE tokens.css → section.css (svih 10) → brend.css.
   Ovdje se ujednačava izgled: pismo, paleta, veličine, razmaci i pokret.
   Raspored (grid/flex/position/align/text-align) se NE dira — on je u
   section.css i tamo i ostaje.
   =========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Sticky zaglavlje ne smije pokriti naslov sekcije na koju se skače. */
  scroll-padding-top: calc(var(--head-h, 74px) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #16241f;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; }

/* Visina fiksiranog zaglavlja — drži je na jednom mjestu, jer je koriste i
   odstojnik ispod zaglavlja i `scroll-padding` za skokove na sidra. */
:root { --head-h: 74px; }

/* Na telefonu traka zaglavlja ima 20px razmaka gore i dolje (vidi dolje),
   pa je i odstojnik ispod nje tolik. */
@media (max-width: 640px) {
  :root { --head-h: 87px; }
}

/* Odstojnik za fiksirano zaglavlje: sekcija zaglavlja u toku ostaje bez
   visine, pa je traka `band-1` nadomješta i ništa se ne podvlači ispod. */
.band[data-band="1"] { min-height: var(--head-h); }


/* ===========================================================================
   1. JEDNO PISMO I JEDNA SKALA NA SVIM SEKCIJAMA

   Svaka sekcija nosi svoj `--ff-*` i svoju `--fs-*` skalu iz templata iz
   kojeg je došla. Selektor je iste specifičnosti kao njihov (`.sec-ime`),
   a učitava se kasnije — pa pobjeđuje po redoslijedu.
   =========================================================================== */

.sec-housecall-header,
.sec-calm-hero,
.sec-sonnenschein-services,
.sec-meridian-referenzen,
.sec-haven-parallax,
.sec-calm-about,
.sec-haven-results,
.sec-sonnenschein-faq,
.sec-meridian-cta,
.sec-calm-footer {
  --ff-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* JEDNA ŠIRINA SADRŽAJA NA CIJELOM SAJTU.
     Svaka sekcija je iz templata donijela svoju: zaglavlje 1120px, hero i
     podnožje 1200, usluge i pitanja 1220, recenzije i kontakt 1240 — pa se
     lijeva ivica pomjerala od sekcije do sekcije. Sve sekcije čitaju
     `--maxw` i `--gutter`, tako da je dovoljno prevezati njih dvije i
     svaki kontejner (uključujući mobilni meni i traku podnožja) se poravna. */
  --maxw:   1200px;
  --gutter: clamp(20px, 5vw, 48px);

  /* Tijelo teksta: 15px / 300 / 1.7 */
  --fs-xs:   0.8125rem;   /* 13px */
  --fs-sm:   0.875rem;    /* 14px */
  --fs-base: 0.9375rem;   /* 15px */
  --fs-md:   1rem;        /* 16px */
  --fs-lg:   1.0625rem;   /* 17px */
  --fs-h4:   1.0625rem;   /* 17px */
  --fs-h3:   1.25rem;     /* 20px */
  --fs-h2:   1.875rem;    /* 30px */
  --fs-h1:   clamp(2rem, 4.6vw + 0.9rem, 3.25rem);
  --fs-time: 1.0625rem;

  --lh-tight: 1.14;
  --lh-snug:  1.35;
  --lh-body:  1.7;

  --ls-tight: -0.015em;
  --ls-label:  0.14em;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---- Naslovi ------------------------------------------------------------ */

.sec-housecall-header h1, .sec-housecall-header h2, .sec-housecall-header h3, .sec-housecall-header h4,
.sec-calm-hero h1, .sec-calm-hero h2, .sec-calm-hero h3, .sec-calm-hero h4,
.sec-sonnenschein-services h1, .sec-sonnenschein-services h2, .sec-sonnenschein-services h3, .sec-sonnenschein-services h4,
.sec-meridian-referenzen h1, .sec-meridian-referenzen h2, .sec-meridian-referenzen h3, .sec-meridian-referenzen h4,
.sec-haven-parallax h1, .sec-haven-parallax h2, .sec-haven-parallax h3, .sec-haven-parallax h4,
.sec-calm-about h1, .sec-calm-about h2, .sec-calm-about h3, .sec-calm-about h4,
.sec-haven-results h1, .sec-haven-results h2, .sec-haven-results h3, .sec-haven-results h4,
.sec-sonnenschein-faq h1, .sec-sonnenschein-faq h2, .sec-sonnenschein-faq h3, .sec-sonnenschein-faq h4,
.sec-meridian-cta h1, .sec-meridian-cta h2, .sec-meridian-cta h3, .sec-meridian-cta h4,
.sec-calm-footer h1, .sec-calm-footer h2, .sec-calm-footer h3, .sec-calm-footer h4 {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.015em;
}

/* h1 */
.sec-calm-hero h1 { font-size: var(--fs-h1); line-height: 1.12; font-weight: 600; }

/* h2 — 30px / 1.2em, na svakoj sekciji */
.sec-housecall-header h2,
.sec-calm-hero h2,
.sec-sonnenschein-services h2,
.sec-meridian-referenzen h2,
.sec-haven-parallax h2,
.sec-calm-about h2,
.sec-haven-results h2,
.sec-sonnenschein-faq h2,
.sec-meridian-cta h2,
.sec-calm-footer h2 {
  font-size: 30px;
  line-height: 1.2em;
  font-weight: 600;
}

/* Sekcija koja naslovu daje vlastitu veličinu mimo `--fs-h2`. */
.sec-meridian-referenzen .revs__meta h2 { font-size: 30px; line-height: 1.2em; }

/* h3 / h4 */
.sec-housecall-header h3, .sec-calm-hero h3, .sec-sonnenschein-services h3,
.sec-meridian-referenzen h3, .sec-haven-parallax h3, .sec-calm-about h3,
.sec-haven-results h3, .sec-sonnenschein-faq h3, .sec-meridian-cta h3,
.sec-calm-footer h3 {
  font-size: var(--fs-h3);
  line-height: 1.35;
  font-weight: 600;
}

/* ---- Tijelo teksta ------------------------------------------------------ */

.sec-housecall-header, .sec-housecall-header p, .sec-housecall-header li,
.sec-calm-hero, .sec-calm-hero p, .sec-calm-hero li,
.sec-sonnenschein-services, .sec-sonnenschein-services p, .sec-sonnenschein-services li,
.sec-meridian-referenzen, .sec-meridian-referenzen p, .sec-meridian-referenzen li,
.sec-haven-parallax, .sec-haven-parallax p, .sec-haven-parallax li,
.sec-calm-about, .sec-calm-about p, .sec-calm-about li,
.sec-haven-results, .sec-haven-results p, .sec-haven-results li,
.sec-sonnenschein-faq, .sec-sonnenschein-faq p, .sec-sonnenschein-faq li,
.sec-meridian-cta, .sec-meridian-cta p, .sec-meridian-cta li,
.sec-calm-footer, .sec-calm-footer p, .sec-calm-footer li {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
}

/* Uvodne rečenice ispod naslova — nešto krupnije, i dalje lagane. */
.sec-calm-hero .hero__lead,
.sec-calm-about .abt__lead,
.sec-sonnenschein-services .u-head p,
.sec-sonnenschein-faq .u-head p,
.sec-haven-results .u-head p,
.sec-haven-parallax .u-head p,
.sec-meridian-referenzen .revs__meta p,
.sec-meridian-cta .cta__ink > p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--c-text-muted);
}

.sec-calm-hero .hero__lead { max-width: 46ch; }

/* Podebljano u tekstu ne smije biti 300 — inače se ne vidi da je istaknuto. */
.sec-housecall-header strong, .sec-calm-hero strong, .sec-sonnenschein-services strong,
.sec-meridian-referenzen strong, .sec-haven-parallax strong, .sec-calm-about strong,
.sec-haven-results strong, .sec-sonnenschein-faq strong, .sec-meridian-cta strong,
.sec-calm-footer strong { font-weight: 600; }

/* Dugmad, oznake i navigacija ostaju čitljivi — 300 je pretanko za njih. */
.sec-housecall-header .u-btn, .sec-calm-hero .u-btn, .sec-meridian-referenzen .u-btn,
.sec-calm-about .u-btn, .sec-meridian-cta .u-btn,
.sec-housecall-header .site-nav a, .sec-housecall-header .menu a,
.sec-sonnenschein-services .u-chip, .sec-sonnenschein-faq .u-chip,
.sec-haven-parallax .u-label, .sec-haven-results .u-label,
.sec-meridian-cta .u-label, .sec-meridian-referenzen .u-label,
.sec-calm-about .u-eyebrow,
.sec-sonnenschein-faq .qa__q button,
.sec-calm-footer .ftr__h {
  font-weight: 500;
}

.sec-sonnenschein-faq .qa__q button { font-size: 16px; line-height: 1.45; }


/* ===========================================================================
   2. JEDNA PALETA NA SVIM SEKCIJAMA

   `brend.css` je već vezao boje brenda (`--c-primary*`, `--c-accent*`).
   Ovdje se ujednačavaju NEUTRALI i vlastite nijanse templata — one koje su
   u TOKENI.md navedene kao „ostaje tebi".
   =========================================================================== */

.sec-housecall-header,
.sec-calm-hero,
.sec-sonnenschein-services,
.sec-meridian-referenzen,
.sec-haven-parallax,
.sec-calm-about,
.sec-haven-results,
.sec-sonnenschein-faq,
.sec-meridian-cta,
.sec-calm-footer {
  --c-bg:            #ffffff;
  --c-bg-alt:        #f3f7f6;
  --c-white:         #ffffff;
  --c-surface:       #e7f0ed;
  --c-surface-soft:  #f3f8f7;

  --c-ink:           #16241f;
  --c-text:          #16241f;
  --c-text-muted:    #5b6b66;
  --c-text-invert:   #ffffff;

  --c-on-dark:       #eef4f2;
  --c-on-dark-mu:    rgba(238, 244, 242, 0.78);

  --c-line:          rgba(22, 36, 31, 0.10);
  --c-line-strong:   rgba(22, 36, 31, 0.20);
  --c-line-dark:     rgba(238, 244, 242, 0.22);
  --c-border:        rgba(22, 36, 31, 0.12);
  --c-border-strong: rgba(22, 36, 31, 0.22);

  /* Zvjezdice u zlatnoj iz logotipa firme. */
  --c-star:          #b8892b;
  --c-google-blue:   #4285F4;

  --c-whatsapp:       #128C7E;
  --c-whatsapp-dk:    #0E6F63;
  --c-whatsapp-vivid: #25D366;
}

/* Sonnenschein sekcije (usluge, pitanja) dolaze u koraljnoj, žutoj i mint
   boji. Tri porodice ostaju — samo prelaze na brend: tirkiz, zlatna, mint. */
.sec-sonnenschein-services,
.sec-sonnenschein-faq {
  --c-coral:      #167c6b;
  --c-coral-dk:   #105d50;
  --c-coral-soft: #e5f0ee;
  --c-sun:        #c9a24a;
  --c-sun-soft:   #f8f1e2;
  --c-mint:       #7fb9a9;
  --c-mint-soft:  #e9f3f0;
}

/* Meridian/Haven vlastite nijanse podloge. */
.sec-meridian-referenzen,
.sec-meridian-cta,
.sec-haven-parallax,
.sec-haven-results {
  --c-accent-tint: var(--accent-soft);
}


/* ===========================================================================
   3. POKRET PRI SKROLANJU

   Sekcije već imaju `[data-reveal]` i IntersectionObserver u svojim
   skriptama. Ovdje se to samo ujednačava: isti pomak, isti tempo, ista
   krivulja na cijelom sajtu — da se ne vidi da su iz raznih templata.
   =========================================================================== */

.sec-housecall-header.has-js [data-reveal],
.sec-calm-hero.has-js [data-reveal],
.sec-sonnenschein-services.has-js [data-reveal],
.sec-meridian-referenzen.has-js [data-reveal],
.sec-haven-parallax.has-js [data-reveal],
.sec-calm-about.has-js [data-reveal],
.sec-haven-results.has-js [data-reveal],
.sec-sonnenschein-faq.has-js [data-reveal],
.sec-meridian-cta.has-js [data-reveal],
.sec-calm-footer.has-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 820ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.sec-housecall-header.has-js [data-reveal].is-in,
.sec-calm-hero.has-js [data-reveal].is-in,
.sec-sonnenschein-services.has-js [data-reveal].is-in,
.sec-meridian-referenzen.has-js [data-reveal].is-in,
.sec-haven-parallax.has-js [data-reveal].is-in,
.sec-calm-about.has-js [data-reveal].is-in,
.sec-haven-results.has-js [data-reveal].is-in,
.sec-sonnenschein-faq.has-js [data-reveal].is-in,
.sec-meridian-cta.has-js [data-reveal].is-in,
.sec-calm-footer.has-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ---- Dodatni sloj: slike se otkrivaju laganim primicanjem --------------- */

.anim-img {
  overflow: hidden;
}

.anim-img > img {
  transform: scale(1.08);
  transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-img.anim-in > img { transform: scale(1); }

/* ---- Traka napretka skrolanja ------------------------------------------ */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 999;
  background: transparent;
  pointer-events: none;
}

.scroll-progress::after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

/* ---- Blagi paralaks na ukrasnim mrljama hero sekcije ------------------- */

.sec-calm-hero .hero__blob,
.sec-calm-about .abt__blob {
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .anim-img > img,
  .sec-calm-hero .hero__blob,
  .sec-calm-about .abt__blob { transform: none !important; transition: none !important; }
  .scroll-progress { display: none; }
}


/* ===========================================================================
   4. DOTJERIVANJE PO SEKCIJAMA
   =========================================================================== */

/* ---- 1. Zaglavlje ------------------------------------------------------- */

/* Zaglavlje je u templatu `position: sticky`, ali mu je sadržavajući blok
   sama sekcija — visok koliko i ono — pa nema gdje da se „lijepi" i odlazi
   sa prvim skrolom. `fixed` ga drži na vrhu cijele stranice.
   Prostor koji time gubi u toku vraća `.band[data-band="1"]` ispod. */
.sec-housecall-header .site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--c-line);
  box-shadow: none;
  transition: box-shadow 300ms var(--ease-out), background 300ms var(--ease-out);
}

.sec-housecall-header .site-head.is-stuck,
.sec-housecall-header .site-head[data-stuck] {
  box-shadow: 0 10px 30px rgba(22, 36, 31, 0.07);
}

/* Logotip firme u zaglavlju. Fajl je 1399×478 (2.93:1), bez rubova — okvir
   uzima omjer same slike, pa `contain` ništa ne siječe i ništa ne rasteže. */
.sec-housecall-header .brand__logo {
  display: block;
  width: 149px;
  height: 51px;
  flex: none;
}

.sec-housecall-header .brand__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* WhatsApp u zaglavlju. Na telefonu ga preuzima ljepljiva traka uz donju
   ivicu (`.mobile-bar`), pa dugme postoji na obje širine — kako uputa i
   traži — a u zaglavlju ne otima mjesto broju telefona. */
.sec-housecall-header .head-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--c-whatsapp);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.sec-housecall-header .head-wa svg { width: 19px; height: 19px; flex: none; }
.sec-housecall-header .head-wa:hover { background: var(--c-whatsapp-dk); transform: translateY(-1px); }

@media (max-width: 860px) {
  .sec-housecall-header .head-wa { display: none; }
}

.sec-housecall-header .site-nav a {
  font-size: 15px;
  letter-spacing: 0;
  color: var(--c-text);
  transition: color 200ms var(--ease-out);
}

.sec-housecall-header .site-nav a:hover { color: var(--c-accent); }

.sec-housecall-header .head-cta {
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0;
  padding-inline: 18px;
  box-shadow: 0 6px 18px rgba(16, 93, 80, 0.22);
}

.sec-housecall-header .menu a {
  font-size: 17px;
  padding-block: 14px;
  border-bottom: 1px solid var(--c-line);
}

/* ---- 2. Hero ------------------------------------------------------------ */

.sec-calm-hero .hero {
  background: linear-gradient(180deg, #f6faf9 0%, #ffffff 62%);
  padding-block: 80px;
}

.sec-calm-hero .hero__rating {
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: #fff;
  box-shadow: 0 4px 14px rgba(22, 36, 31, 0.05);
  padding: 7px 16px 7px 10px;
  font-size: 14px;
}

.sec-calm-hero .hero__stars { color: var(--c-star); letter-spacing: 0.06em; }
.sec-calm-hero .hero__rating-text { font-weight: 300; }
.sec-calm-hero .hero__rating-text strong { font-weight: 600; }

.sec-calm-hero .hero__frame {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(22, 36, 31, 0.16);
}

.sec-calm-hero .hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Lice je lijevo od sredine — kadar se drži na njemu i na uskom ekranu. */
  object-position: 38% 32%;
}

.sec-calm-hero .hero__card {
  border-radius: 16px;
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(22, 36, 31, 0.14);
  padding: 12px 16px;
}

.sec-calm-hero .hero__card-text strong { font-size: 14px; font-weight: 600; }
.sec-calm-hero .hero__card-text small { font-size: 12.5px; color: var(--c-text-muted); }

.sec-calm-hero .hero__card-icon {
  color: var(--c-accent);
  background: var(--c-accent-soft);
  border-radius: 12px;
}

.sec-calm-hero .u-arc { color: var(--c-accent); }

/* ---- 3. Usluge ---------------------------------------------------------- */

/* Neparne trake (1, 3, 5, 7, 9) idu na bijelo. Peta je fotografska sekcija
   i zadržava sliku — nju bijela pozadina ne dotiče. */
.band-odd .sec-sonnenschein-services .svcs,
.band-odd .sec-haven-results .ba,
.band-odd .sec-meridian-cta .cta { background: #ffffff; }

.sec-sonnenschein-services .u-chip {
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--c-accent-soft);
  color: var(--c-accent-dk);
  padding: 7px 14px;
}

/* Sekcija je sada bijela, pa bijele kartice na njoj ne bi imale ivicu koja
   se vidi — obične kartice dobijaju najsvjetliju nijansu brenda. */
.sec-sonnenschein-services .bento {
  border-radius: 20px;
  border: 1px solid var(--c-line);
  background: #f4f8f7;
  box-shadow: 0 2px 10px rgba(22, 36, 31, 0.04);
  padding: 26px;
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}

.sec-sonnenschein-services .bento:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(22, 36, 31, 0.11);
}

/* Fotografija ordinacije kao podloga. Gradijent preko nje je gust tamo gdje
   stoji tekst, a rijedak u gornjem desnom uglu — da se i dalje razazna šta
   je na slici, a da svako slovo ostane čitljivo. */
.sec-sonnenschein-services .bento--hero {
  position: relative;
  isolation: isolate;
  background-color: #16241f;
  background-image:
    linear-gradient(150deg, rgba(11, 23, 19, 0.95) 0%, rgba(11, 23, 19, 0.90) 50%, rgba(13, 38, 31, 0.70) 80%, rgba(13, 38, 31, 0.50) 100%),
    url('../images/gallery/a872808c-1789-47ce-b483-fa9a183e78b7-800.webp');
  background-size: cover, cover;
  background-position: center, 62% 42%;
  background-repeat: no-repeat, no-repeat;
  border-color: transparent;
  color: var(--c-on-dark);
  text-shadow: 0 1px 12px rgba(6, 14, 11, 0.55);
}

.sec-sonnenschein-services .bento--hero h3 { color: #fff; }
.sec-sonnenschein-services .bento--hero p { color: var(--c-on-dark-mu); }
.sec-sonnenschein-services .bento--hero .bento__list li { color: var(--c-on-dark-mu); }
.sec-sonnenschein-services .bento--hero .bento__ic { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sec-sonnenschein-services .bento--hero .bento__go { color: #fff; font-weight: 500; }

.sec-sonnenschein-services .bento__ic { border-radius: 14px; }

.sec-sonnenschein-services .bento--mint .bento__ic { background: var(--c-mint-soft); color: var(--c-accent-dk); }
.sec-sonnenschein-services .bento--sun  .bento__ic { background: var(--c-sun-soft);  color: #8a6b1f; }
.sec-sonnenschein-services .bento--coral .bento__ic { background: var(--c-coral-soft); color: var(--c-coral-dk); }

/* ---- 4. Recenzije ------------------------------------------------------- */

.sec-meridian-referenzen .revs { background: #fff; }

.sec-meridian-referenzen .revs__display {
  border-radius: 24px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-alt);
  padding: clamp(24px, 3.5vw, 40px);
}

.sec-meridian-referenzen .revs__score strong { color: var(--c-primary); font-weight: 600; }
.sec-meridian-referenzen .u-stars { color: var(--c-star); }

.sec-meridian-referenzen .revs__dist i { border-radius: 999px; background: rgba(22, 36, 31, 0.09); }
.sec-meridian-referenzen .revs__dist i::before { background: var(--c-star); border-radius: 999px; }

/* U bazi je zasad JEDNA recenzija. Mreža sekcije ostaje trostubačna, ali
   jedina kartica zauzima cijeli red — inače dvije trećine reda stoje prazne
   i čita se kao da je sadržaj otpao. Kad stignu nove recenzije, red se
   popunjava sam i pravilo se briše. */
.sec-meridian-referenzen .revs__grid > .rev:only-child { grid-column: 1 / -1; }

.sec-meridian-referenzen .rev {
  border-radius: 20px;
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  background: #fff;
  box-shadow: 0 10px 30px rgba(22, 36, 31, 0.07);
  padding: 26px;
}

.sec-meridian-referenzen .rev__av {
  background: var(--c-accent-soft);
  color: var(--c-accent-dk);
  font-weight: 600;
}

.sec-meridian-referenzen .rev__tx { font-size: 15px; line-height: 1.7; }

.sec-meridian-referenzen .u-btn--line { border-radius: 999px; }

/* ---- 5. Paralaks / koraci ---------------------------------------------- */

.sec-haven-parallax .scrub__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fotografija je 2000×1335; lice pacijentice je lijevo od sredine i pri
     vrhu — kadar se drži na njemu i kad se okvir suzi. */
  object-position: 45% 30%;
}

/* Zatamnjenje ide koliko treba da tekst bude čitljiv — fotografija
   ordinacije mora ostati prepoznatljiva. */
.sec-haven-parallax .scrub__veil {
  background:
    linear-gradient(180deg, rgba(10, 20, 17, 0.30) 0%, rgba(10, 20, 17, 0.68) 62%, rgba(10, 20, 17, 0.86) 100%);
}

.sec-haven-parallax .u-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--c-accent-soft);
}

.sec-haven-parallax .step__n {
  border-radius: 999px;
  border: 1px solid rgba(238, 244, 242, 0.34);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
}

.sec-haven-parallax .step h3 { color: #fff; }
.sec-haven-parallax .step p { color: var(--c-on-dark-mu); }

/* ---- 6. O nama ---------------------------------------------------------- */

.sec-calm-about .abt { background: var(--c-bg-alt); }

.sec-calm-about .abt__photo {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 26px 62px rgba(22, 36, 31, 0.15);
}

/* Fotografija je pejzažna (2000×1333), okvir uspravan — kadar se pomjera
   ulijevo da djevojčica ostane cijela u slici, a ne presječena ivicom. */
.sec-calm-about .abt__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% center;
}

/* U okviru za portret stoji znak ordinacije, ne fotografija — zato bijela
   podloga, `contain` i malo zraka okolo da srce ne dodiruje ivice. */
.sec-calm-about .abt__portrait {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: 0 16px 40px rgba(22, 36, 31, 0.14);
  padding: 14px;
}

.sec-calm-about .abt__portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sec-calm-about .abt__badge {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--c-line);
  box-shadow: 0 14px 40px rgba(22, 36, 31, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sec-calm-about .abt__badge-icon { color: var(--c-accent); }
.sec-calm-about .abt__badge-text strong { font-size: 14px; }
.sec-calm-about .abt__badge-text small { font-size: 12.5px; color: var(--c-text-muted); }

.sec-calm-about .u-eyebrow {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--c-accent-dk);
}

.sec-calm-about .u-arc { color: var(--c-accent); }

.sec-calm-about .abt__tick { color: var(--c-accent); }

.sec-calm-about .abt__sign {
  border-top: 1px solid var(--c-line);
  padding-top: 18px;
}

.sec-calm-about .abt__sign-name { font-size: 17px; font-weight: 600; margin: 0; }
.sec-calm-about .abt__sign-role { font-size: 14px; color: var(--c-text-muted); margin: 2px 0 0; }

/* ---- 7. Prije i poslije ------------------------------------------------- */

.sec-haven-results .ba { background: #fff; }

.sec-haven-results .u-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--c-accent-dk);
}

/* Naslov je templat lomio na dva reda kroz `max-width: 21ch`. Na širem
   ekranu staje u jedan; na telefonu se prelama sam, kako i treba. */
.sec-haven-results .u-head h2 { max-width: none; }

@media (min-width: 700px) {
  .sec-haven-results .u-head h2 { white-space: nowrap; }
}

.sec-haven-results .bcase {
  border-radius: 22px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-alt);
  padding: 18px;
  overflow: hidden;
}

.sec-haven-results .bimg {
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-surface);
}

/* Fotografije su 900×491 — okvir uzima omjer fotografije, da nikome
   ivica ne presiječe lice. */
.sec-haven-results .bimg img {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 491;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sec-haven-results .bimg figcaption {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
}

.sec-haven-results .bcase__tx h3 { margin-top: 4px; }

/* ---- 8. Pitanja --------------------------------------------------------- */

.sec-sonnenschein-faq .faq { background: var(--c-bg-alt); }

.sec-sonnenschein-faq .u-chip {
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--c-accent-soft);
  color: var(--c-accent-dk);
  padding: 7px 14px;
}

.sec-sonnenschein-faq .u-mark {
  background: linear-gradient(180deg, transparent 62%, var(--c-sun-soft) 62%);
  padding-inline: 2px;
}

.sec-sonnenschein-faq .qa {
  border-radius: 18px;
  border: 1px solid var(--c-line);
  background: #fff;
  box-shadow: 0 2px 10px rgba(22, 36, 31, 0.04);
  transition: box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out);
}

.sec-sonnenschein-faq .qa:hover { border-color: var(--c-line-strong); }
.sec-sonnenschein-faq .qa.is-open { box-shadow: 0 16px 40px rgba(22, 36, 31, 0.09); }

.sec-sonnenschein-faq .qa--mint,
.sec-sonnenschein-faq .qa--sun,
.sec-sonnenschein-faq .qa--coral,
.sec-sonnenschein-faq .qa--white { background: #fff; }

.sec-sonnenschein-faq .qa__sign { color: var(--c-accent); }

/* ---- 9. Kontakt --------------------------------------------------------- */

.sec-meridian-cta .cta { background: #fff; }

.sec-meridian-cta .cta__panel {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(22, 36, 31, 0.14);
}

.sec-meridian-cta .cta__ink {
  background: linear-gradient(155deg, #16241f 0%, #1d3a31 100%);
  padding: clamp(28px, 4vw, 48px);
}

.sec-meridian-cta .cta__ink h2 { color: #fff; }
.sec-meridian-cta .cta__ink > p { color: var(--c-on-dark-mu); }
.sec-meridian-cta .u-label { letter-spacing: 0.16em; text-transform: uppercase; font-size: 12.5px; color: var(--accent-soft); }

.sec-meridian-cta .cta__facts li { color: var(--c-on-dark-mu); }
.sec-meridian-cta .cta__facts a { color: var(--c-on-dark); text-decoration: none; border-bottom: 1px solid rgba(238, 244, 242, 0.3); }
.sec-meridian-cta .cta__facts a:hover { border-bottom-color: var(--c-on-dark); }

.sec-meridian-cta .cta__status { color: var(--c-on-dark); font-size: 14px; }
.sec-meridian-cta .cta__dot { background: #46d39a; }
.sec-meridian-cta .cta__status.is-closed .cta__dot { background: #d8a24a; }

.sec-meridian-cta .cta__paper { background: var(--c-bg-alt); padding: clamp(20px, 3vw, 32px); }

.sec-meridian-cta .crow {
  border-radius: 18px;
  border: 1px solid var(--c-line);
  background: #fff;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}

.sec-meridian-cta .crow:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(22, 36, 31, 0.12);
}

.sec-meridian-cta .crow--tel .crow__ic { background: var(--c-accent-soft); color: var(--c-accent-dk); border-radius: 14px; }
.sec-meridian-cta .crow--wa  .crow__ic { background: #e4f6ee; color: var(--c-whatsapp); border-radius: 14px; }

.sec-meridian-cta .crow__tx small { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-muted); }
.sec-meridian-cta .crow__tx strong { font-size: 18px; font-weight: 600; }
.sec-meridian-cta .crow__tx > span { font-size: 13.5px; color: var(--c-text-muted); }

.sec-meridian-cta .cta__fine { font-size: 13.5px; color: var(--c-text-muted); }

/* ---- 10. Podnožje ------------------------------------------------------- */

/* Tamno podnožje. Sekcija dobija vlastite neutrale, pa sve unutra (linije,
   tekst, tabela, ikone) prati bez ijednog izuzetka po elementu.
   `--ftr-edge` je boja luka na vrhu — uzima boju sekcije IZNAD podnožja,
   inače se ne vidi da je luk tu. */
.sec-calm-footer {
  --ftr-edge: #ffffff;
  --c-text: #eef4f2;
  --c-text-muted: rgba(238, 244, 242, 0.70);
  --c-line: rgba(238, 244, 242, 0.16);
  --c-line-strong: rgba(238, 244, 242, 0.28);
  --c-border: rgba(238, 244, 242, 0.16);
  --c-border-strong: rgba(238, 244, 242, 0.28);
}

.sec-calm-footer .ftr {
  background: #101c18;
  color: var(--c-text);
}

/* Logotip u podnožju: siva slova logotipa nemaju kontrast na tamnoj
   podlozi, pa stoji na bijeloj pločici — sa zrakom okolo da natpis ne
   dodiruje ivice. */
.sec-calm-footer .ftr__logo-mark {
  display: block;
  width: 216px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  padding: 12px 18px;
}

.sec-calm-footer .ftr__logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.sec-calm-footer .ftr__h {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  font-weight: 500;
}

.sec-calm-footer .ftr__col a,
.sec-calm-footer .ftr__link {
  color: var(--c-text);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}

/* Tirkiz brenda je pretaman za tamnu podlogu — hover ide na svijetlu
   izvedenicu iste boje. */
.sec-calm-footer .ftr__col a:hover,
.sec-calm-footer .ftr__link:hover { color: #6fd3bd; }

.sec-calm-footer .ftr__social a {
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: rgba(238, 244, 242, 0.07);
  color: var(--c-text);
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.sec-calm-footer .ftr__social a:hover {
  border-color: rgba(238, 244, 242, 0.4);
  background: rgba(238, 244, 242, 0.14);
  transform: translateY(-2px);
}

.sec-calm-footer .ftr__hours { width: 100%; font-size: 14px; }
.sec-calm-footer .ftr__hours th { font-weight: 300; color: var(--c-text-muted); text-align: left; padding: 3px 0; }
.sec-calm-footer .ftr__hours td { font-weight: 500; padding: 3px 0; white-space: nowrap; }

.sec-calm-footer address { font-style: normal; color: var(--c-text-muted); }

.sec-calm-footer .ftr__map { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: #6fd3bd; }

.sec-calm-footer .ftr__bar { border-top: 1px solid var(--c-line); }
.sec-calm-footer .ftr__bar p { font-size: 13px; color: var(--c-text-muted); }

/* Dugme „na vrh". Templat ga drži skrivenim dok se ne prođe 90% ekrana, pa
   se lako previdi: bijeli obrub ga odvaja i od bijele i od tamne podloge,
   strelica je krupnija, a `z-index` iznad ljepljive trake na telefonu. */
.sec-calm-footer .ftr__top {
  border-radius: 999px;
  background: var(--c-accent);
  color: #fff;
  border: 2px solid #fff;
  width: 52px;
  height: 52px;
  padding: 0;
  z-index: 90;
  box-shadow: 0 8px 24px rgba(16, 93, 80, 0.42), 0 0 0 1px rgba(22, 36, 31, 0.10);
}

.sec-calm-footer .ftr__top:hover { background: var(--c-accent-dk); }

.sec-calm-footer .ftr__top span {
  width: 12px;
  height: 12px;
  border-top-width: 2.5px;
  border-right-width: 2.5px;
}


/* ===========================================================================
   6. TELEFON JE MJERA — odluke donesene na 375 px
   =========================================================================== */

@media (max-width: 640px) {

  /* Vertikalni razmak sekcija na telefonu: 45px gore i dolje. */
  .sec-sonnenschein-services .svcs,
  .sec-meridian-referenzen .revs,
  .sec-calm-about .abt,
  .sec-haven-results .ba,
  .sec-sonnenschein-faq .faq,
  .sec-meridian-cta .cta { padding-block: 45px; }

  .sec-haven-parallax .scrub__copy { padding-block: 45px; }

  /* Zaglavlje: 20px iznad i ispod sadržaja trake. Templat traci daje
     `height: var(--header-h)` — fiksnu visinu — pa razmak ne bi imao gdje
     stati; zato ide `height: auto`. */
  .sec-housecall-header .site-head__inner { height: auto; padding-block: 20px; }

  /* Podnožje: 65px od gornje ivice do sadržaja. Razmak je do sada držao
     `.ftr` (88px) plus `.ftr__inner` (45px) — ukupno 133px. Sada ga daje
     samo `.ftr`, a ukrasni luk se skraćuje da stane u njega. */
  .sec-calm-footer .ftr { padding-top: 65px; }
  .sec-calm-footer .ftr__edge { height: 24px; }
  .sec-calm-footer .ftr__inner { padding-top: 0; padding-bottom: 45px; }

  /* Paralaks ide od ivice do ivice: bez bočnog razmaka sekcije i bez
     zaobljenja okvira, da fotografija popuni cijelu širinu ekrana. */
  .sec-haven-parallax .scrub { padding: 0; }
  .sec-haven-parallax .scrub__frame { border-radius: 0; }

  /* Kontejner na telefonu: bez bočnog razmaka, širina 80% i centriran. */
  .sec-housecall-header .u-container,
  .sec-calm-hero .u-container,
  .sec-sonnenschein-services .u-container,
  .sec-meridian-referenzen .u-container,
  .sec-haven-parallax .u-container,
  .sec-calm-about .u-container,
  .sec-haven-results .u-container,
  .sec-sonnenschein-faq .u-container,
  .sec-meridian-cta .u-container,
  .sec-calm-footer .u-container {
    width: 80%;
    padding-inline: 0;
    margin-inline: auto;
  }

  /* Uži stubac traži manje naslove — 30px bi se lomilo na tri reda. */
  .sec-housecall-header h2,
  .sec-calm-hero h2,
  .sec-sonnenschein-services h2,
  .sec-meridian-referenzen h2,
  .sec-haven-parallax h2,
  .sec-calm-about h2,
  .sec-haven-results h2,
  .sec-sonnenschein-faq h2,
  .sec-meridian-cta h2,
  .sec-calm-footer h2,
  .sec-meridian-referenzen .revs__meta h2 { font-size: 23px; line-height: 1.2em; }

  .sec-housecall-header h3, .sec-calm-hero h3, .sec-sonnenschein-services h3,
  .sec-meridian-referenzen h3, .sec-haven-parallax h3, .sec-calm-about h3,
  .sec-haven-results h3, .sec-sonnenschein-faq h3, .sec-meridian-cta h3,
  .sec-calm-footer h3 { font-size: 18px; }

  .sec-sonnenschein-faq .qa__q button { font-size: 15px; }

  /* Hero: iznad pregiba stoje naslov i jedno dugme. Uvod se skraćuje na
     najviše tri reda — druga rečenica ide samo na širem ekranu. */
  .sec-calm-hero .hero { padding-block: 45px; }
  /* Bijeli luk na dnu hero sekcije je 48px i sa 45px razmaka bi prešao
     preko donje kartice — skraćuje se da stane ispod nje. */
  .sec-calm-hero .hero__wave { height: 24px; }
  .sec-calm-hero .lead-extra { display: none; }
  .sec-calm-hero .hero__lead { font-size: 16px; max-width: 34ch; }

  .sec-calm-hero h1 { font-size: 26px; line-height: 1.2; }

  /* Dva jednako teška dugmeta jedno ispod drugog nemaju hijerarhiju.
     Glavno ostaje puno, drugo postaje lakše. */
  .sec-calm-hero .hero__actions .u-btn--primary { width: 100%; }
  .sec-calm-hero .hero__actions .u-btn--ghost {
    width: 100%;
    background: transparent;
    border: 1px solid var(--c-line-strong);
    box-shadow: none;
    font-weight: 500;
  }

  /* Lebdeće kartice preko slike na uskom ekranu samo pokrivaju fotografiju. */
  .sec-calm-hero .hero__card { position: static; margin-top: 10px; width: 100%; backdrop-filter: none; }
  .sec-calm-hero .hero__ring { display: none; }
  .sec-calm-hero .hero__frame { border-radius: 20px; }
  .sec-calm-hero .hero__frame img { aspect-ratio: 4 / 3; object-position: 40% 30%; }

  .sec-sonnenschein-services .bento { padding: 20px; }

  /* Na jednom stupcu tekst ide preko cijele širine kartice, pa desna strana
     više nije slobodna — zastor se izravnava i pojačava. */
  .sec-sonnenschein-services .bento--hero {
    background-image:
      linear-gradient(180deg, rgba(11, 23, 19, 0.90) 0%, rgba(11, 23, 19, 0.86) 60%, rgba(13, 38, 31, 0.78) 100%),
      url('../images/gallery/a872808c-1789-47ce-b483-fa9a183e78b7-800.webp');
    background-position: center, 58% 45%;
  }
  .sec-meridian-referenzen .rev,
  .sec-meridian-referenzen .revs__display { padding: 20px; }
  .sec-haven-results .bcase { padding: 12px; }

  .sec-meridian-cta .cta__panel { border-radius: 22px; }
  .sec-calm-footer .ftr__logo-mark { width: 186px; height: 72px; padding: 10px 14px; }
}

/* Zaglavlje: logotip ostaje čitljiv i na 375 px. */
@media (max-width: 420px) {
  .sec-housecall-header .brand__logo { width: 126px; height: 43px; }
  .sec-housecall-header .head-cta__tx { display: none; }
  .sec-housecall-header .head-cta { padding-inline: 12px; }
}



/* ===========================================================================
   7. FOKUS I ŠTAMPA
   =========================================================================== */

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media print {
  .scroll-progress { display: none !important; }
}