/* ==========================================================================
   Dežurni Stomatolog Brčko — Dr Mirza Bjelak · stil sajta

   Učitava se POSLIJE `tokens.css`, svih `section.css` i `brend.css`, pa ih
   nadjačava po redoslijedu. Raspored (grid, flex, poravnanja) se ovdje NE
   dira — samo boja, pismo, razmak, zaobljenje, sjenka, pozadina i kadar
   slike. Jedini izuzetak je hero na telefonu, gdje UPUTA izričito traži da
   tekst siđe ispod fotografije.

   1. Osnova stranice i paleta
   2. Zajednički tokeni za svih 11 sekcija
   3. Popravke po sekciji
   4. Lebdeće WhatsApp dugme
   5. Telefon — odluke se donose na 375 px
   6. Štampa
   ========================================================================== */

/* ==========================================================================
   1. OSNOVA STRANICE I PALETA
   ========================================================================== */

:root {
  /* --- neutrali, blago tonirani u zeleno da prate brend --- */
  --ds-bg:           #fafbfa;
  --ds-bg-alt:       #eff4f2;
  --ds-surface:      #e1eeea;
  --ds-surface-soft: #f4f8f7;
  --ds-white:        #ffffff;

  --ds-ink:          #16241f;   /* = --primary */
  --ds-ink-deep:     #0e1b17;
  --ds-text:         #1c2b26;
  --ds-text-muted:   #55665f;

  --ds-line:         rgba(22, 36, 31, 0.12);
  --ds-line-strong:  rgba(22, 36, 31, 0.24);
  --ds-on-dark:      #e9f1ee;
  --ds-on-dark-mu:   rgba(233, 241, 238, 0.76);
  --ds-line-dark:    rgba(233, 241, 238, 0.20);

  /* Akcent na TAMNOJ podlozi — brend-akcent je taman i tamo se gubi. */
  --ds-accent-lite:  #63c8b4;
  --ds-accent-tint:  #cfe8e2;

  /* Topli signal: dežurstvo, naljepnica, zvjezdice. Crveno bi na sajtu
     hitne službe plašilo, jantar radi isti posao mirnije. */
  --ds-warm:         #e2963a;
  --ds-warm-soft:    #fbeeda;
  --ds-star:         #d99a2b;

  /* Zaglavlje ide na crno. Templat je crtan za traku PREKO tamne
     fotografije, pa mu je osnovna boja skoro bijela — na ovom svijetlom
     herou se gubila. */
  --ds-header-fg:    #000000;
  --ds-header-fg-mu: #3a3a3a;

  --ds-wa:           #0f7d6f;
  --ds-wa-dk:        #0a5f54;
  --ds-wa-vivid:     #25d366;
  --ds-google-blue:  #4285f4;

  /* --- zaobljenja --- */
  --ds-r-xs:  8px;
  --ds-r-sm:  12px;
  --ds-r-md:  16px;
  --ds-r-lg:  22px;
  --ds-r-xl:  28px;
  --ds-r-2xl: 36px;

  /* --- sjenke: sve iz iste zelene tinte --- */
  --ds-sh-xs: 0 1px 2px rgba(22, 36, 31, 0.05);
  --ds-sh-sm: 0 2px 10px -4px rgba(22, 36, 31, 0.14);
  --ds-sh-md: 0 12px 28px -14px rgba(22, 36, 31, 0.26), 0 2px 6px rgba(22, 36, 31, 0.05);
  --ds-sh-lg: 0 24px 50px -22px rgba(22, 36, 31, 0.32), 0 4px 12px rgba(22, 36, 31, 0.06);
  --ds-sh-xl: 0 40px 80px -32px rgba(22, 36, 31, 0.38);

  /* --- tipografska skala --- */
  --ds-fs-xs:   0.8125rem;
  --ds-fs-sm:   0.9375rem;
  --ds-fs-base: 1rem;
  --ds-fs-md:   1.0625rem;
  --ds-fs-lg:   clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  --ds-fs-h4:   clamp(1.1875rem, 0.5vw + 1.06rem, 1.375rem);
  --ds-fs-h3:   clamp(1.3125rem, 0.8vw + 1.13rem, 1.625rem);
  --ds-fs-h2:   clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
  --ds-fs-h1:   clamp(2.0625rem, 3.2vw + 1.15rem, 3.5rem);

  /* --- ritam --- */
  --ds-section-y: clamp(56px, 7.5vw, 100px);
  --ds-gutter:    clamp(20px, 5vw, 40px);
  --ds-maxw:      1160px;
  --ds-header-h:  74px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ds-header-h) + 12px);
  background: var(--ds-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Omotač sastavljača ne smije praviti novi kontekst — sekcije nose svoju
   pozadinu same, a zaglavlje je `position: fixed`. */
.band { display: contents; }

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

::selection { background: var(--ds-surface); color: var(--ds-ink); }

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

/* ==========================================================================
   2. ZAJEDNIČKI TOKENI — jedno pismo, jedna paleta, jedan ritam
   Sekcije i dalje čitaju SVOJE varijable; ovdje samo pokazuju na isto.
   ========================================================================== */

.sec-haven-header,
.sec-klar-hero,
.sec-meridian-services,
.sec-bloom-referenzen,
.sec-calm-parallax,
.sec-sightline-about,
.sec-rowan-results,
.sec-fundament-instagram,
.sec-nordlicht-faq,
.sec-atelier-cta,
.sec-bloom-footer {
  /* --- PISMO: Nunito za naslove (opšta praksa), Inter za tekst --- */
  --ff-display: var(--font-display-rounded);
  --ff-body:    var(--font-sans);

  /* --- boje --- */
  --c-bg:             var(--ds-bg);
  --c-bg-alt:         var(--ds-bg-alt);
  --c-surface:        var(--ds-surface);
  --c-surface-soft:   var(--ds-surface-soft);
  --c-surface-warm:   var(--ds-surface-soft);
  --c-white:          var(--ds-white);

  --c-ink:            var(--ds-ink);
  --c-ink-soft:       var(--ds-text);
  --c-ink-70:         rgba(22, 36, 31, 0.70);
  --c-ink-12:         rgba(22, 36, 31, 0.12);
  --c-ink-06:         rgba(22, 36, 31, 0.06);

  --c-text:           var(--ds-text);
  --c-text-muted:     var(--ds-text-muted);
  --c-text-invert:    var(--ds-on-dark);
  --c-on-dark:        var(--ds-on-dark);
  --c-on-dark-mu:     var(--ds-on-dark-mu);

  --c-line:           var(--ds-line);
  --c-line-strong:    var(--ds-line-strong);
  --c-line-dark:      var(--ds-line-dark);
  --c-line-invert:    var(--ds-line-dark);
  --c-border:         var(--ds-line);
  --c-border-strong:  var(--ds-line-strong);

  --c-accent-tint:    var(--ds-accent-tint);
  --c-mint:           var(--ds-accent-lite);
  --c-mint-soft:      var(--ds-accent-tint);

  --c-whatsapp:       var(--ds-wa);
  --c-whatsapp-dk:    var(--ds-wa-dk);
  --c-whatsapp-vivid: var(--ds-wa-vivid);
  --c-star:           var(--ds-star);
  --c-google-blue:    var(--ds-google-blue);

  /* --- zaobljenja --- */
  --r-xs:      var(--ds-r-xs);
  --r-sm:      var(--ds-r-sm);
  --r-md:      var(--ds-r-md);
  --r-lg:      var(--ds-r-lg);
  --r-xl:      var(--ds-r-xl);
  --r-2xl:     var(--ds-r-2xl);
  --r-card:    var(--ds-r-md);
  --r-card-lg: var(--ds-r-xl);
  --r-gallery: var(--ds-r-md);
  --r-img:     var(--ds-r-md);
  --r-panel:   var(--ds-r-2xl);
  --r-pill:    999px;
  --r-circle:  50%;

  /* --- sjenke --- */
  --sh-xs: var(--ds-sh-xs);
  --sh-sm: var(--ds-sh-sm);
  --sh-md: var(--ds-sh-md);
  --sh-lg: var(--ds-sh-lg);
  --sh-xl: var(--ds-sh-xl);

  /* --- ritam --- */
  --section-y: var(--ds-section-y);
  --panel-y:   var(--ds-section-y);
  --gutter:    var(--ds-gutter);
  --maxw:      var(--ds-maxw);
  --header-h:  var(--ds-header-h);

  /* --- tipografija --- */
  --fs-xs:   var(--ds-fs-xs);
  --fs-sm:   var(--ds-fs-sm);
  --fs-base: var(--ds-fs-base);
  --fs-md:   var(--ds-fs-md);
  --fs-lg:   var(--ds-fs-lg);
  --fs-h4:   var(--ds-fs-h4);
  --fs-h3:   var(--ds-fs-h3);
  --fs-h2:   var(--ds-fs-h2);
  --fs-h1:   var(--ds-fs-h1);
  --fs-time: var(--ds-fs-md);

  --lh-tight: 1.1;
  --lh-snug:  1.24;
  --lh-body:  1.62;
  --ls-tight: -0.015em;
  --ls-label:  0.11em;
}

/* Nunito je zaobljeno pismo i na 600 djeluje mekano — naslovi idu na 700+. */
.sec-haven-header :is(h1,h2,h3,h4),
.sec-klar-hero :is(h1,h2,h3,h4),
.sec-meridian-services :is(h1,h2,h3,h4),
.sec-bloom-referenzen :is(h1,h2,h3,h4),
.sec-calm-parallax :is(h1,h2,h3,h4),
.sec-sightline-about :is(h1,h2,h3,h4),
.sec-rowan-results :is(h1,h2,h3,h4),
.sec-fundament-instagram :is(h1,h2,h3,h4),
.sec-nordlicht-faq :is(h1,h2,h3,h4),
.sec-atelier-cta :is(h1,h2,h3,h4),
.sec-bloom-footer :is(h1,h2,h3,h4) {
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--primary);
}

/* Fokus: isti prsten na cijelom sajtu. */
.sec-haven-header :focus-visible,
.sec-klar-hero :focus-visible,
.sec-meridian-services :focus-visible,
.sec-bloom-referenzen :focus-visible,
.sec-calm-parallax :focus-visible,
.sec-sightline-about :focus-visible,
.sec-rowan-results :focus-visible,
.sec-fundament-instagram :focus-visible,
.sec-nordlicht-faq :focus-visible,
.sec-atelier-cta :focus-visible,
.sec-bloom-footer :focus-visible,
.wa-float:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--ds-r-xs);
}

/* ==========================================================================
   3. POPRAVKE PO SEKCIJI
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Zaglavlje (Haven)
   -------------------------------------------------------------------------- */

/* Osnovna boja trake. Templat ovdje drži `--c-on-dark` (skoro bijelo), a
   `.brand__tx strong` i `.site-nav a` uzimaju `currentColor` — pa se na
   svijetloj podlozi nije vidjelo ništa što nije bilo obojeno napose. */
.sec-haven-header .site-head {
  background: rgba(250, 251, 250, 0.94);
  border-bottom: 1px solid var(--ds-line);
  color: var(--ds-header-fg);
}
.sec-haven-header .site-head__inner { gap: 18px; }

/* Znak je u templatu namjerno providan (55 %) dok traka stoji preko
   fotografije. Ovaj hero je svijetao, pa ide pun. Selektor mora biti
   jednako specifičan kao onaj sa `:not(.is-stuck)`, inače ne pobjeđuje. */
.sec-haven-header .brand__mark,
.sec-haven-header .site-head:not(.is-stuck) .brand__mark {
  width: 40px; height: 40px;
  color: var(--ds-header-fg);
}
.sec-haven-header .brand__tx strong {
  font-family: var(--ff-display);
  font-size: 1.16rem; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ds-header-fg);
}
.sec-haven-header .brand__tx small {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-header-fg-mu);
}

/* Svaka stavka menija stoji u JEDNOM redu. */
.sec-haven-header .site-nav a {
  padding: 10px 11px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ds-header-fg);
  border-radius: var(--ds-r-xs);
}
.sec-haven-header .site-nav a:hover,
.sec-haven-header .site-head.is-stuck .site-nav a:hover,
.sec-haven-header .site-nav a.is-current,
.sec-haven-header .site-head.is-stuck .site-nav a.is-current {
  color: var(--accent-strong);
  background: var(--ds-surface-soft);
}

/* Broj u zaglavlju: nosi glavnu radnju, pa je jak i ne prelama se. */
.sec-haven-header .head-tel {
  flex: none;
  padding: 10px 14px;
  border-radius: var(--ds-r-sm);
  white-space: nowrap;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ds-header-fg);
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-line);
}
.sec-haven-header .head-tel:hover {
  background: var(--ds-surface);
  border-color: var(--ds-line-strong);
}
.sec-haven-header .head-tel svg { width: 18px; height: 18px; color: var(--accent); }

/* WhatsApp u zaglavlju — širok ekran; na telefonu ga nosi lebdeće dugme. */
.sec-haven-header .head-cta {
  --btn-bg: var(--ds-wa);
  --btn-fg: #fff;
  flex: none;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--ds-r-sm);
  box-shadow: var(--ds-sh-sm);
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.sec-haven-header .head-cta:hover { --btn-bg: var(--ds-wa-dk); }
.sec-haven-header .head-cta svg { width: 18px; height: 18px; }

/* Templat dugme obijeli dok traka stoji preko fotografije („na slici bi se
   puno dugme utopilo u zastor"). Ovaj hero je svijetao, pa je bijelo na
   bijelom — WhatsApp ostaje zelen na obje širine i u oba stanja. */
.sec-haven-header .site-head:not(.is-stuck) .head-cta {
  --btn-bg: var(--ds-wa);
  --btn-fg: #fff;
}

/* Između 1000 i 1230 px nema mjesta za sve troje u jednom redu. */
@media (max-width: 1230px) {
  .sec-haven-header .site-head__inner { gap: 12px; }
  .sec-haven-header .site-nav ul { gap: 0; }
  .sec-haven-header .site-nav a { padding: 10px 8px; font-size: 0.875rem; }
  .sec-haven-header .head-cta .head-cta__tx,
  .sec-haven-header .head-cta span { display: none; }
  .sec-haven-header .head-cta { padding: 10px 12px; }
}

.sec-haven-header .burger {
  border-radius: var(--ds-r-sm);
  border-color: var(--ds-line-strong);
  color: var(--primary);
}

/* Mobilni meni */
.sec-haven-header .msheet__panel {
  background: var(--ds-bg);
  border-radius: var(--ds-r-2xl) var(--ds-r-2xl) 0 0;
}
.sec-haven-header .msheet__list a {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--primary);
  border-bottom: 1px solid var(--ds-line);
}
.sec-haven-header .msheet__foot .u-btn { border-radius: var(--ds-r-md); font-weight: 700; }
.sec-haven-header .msheet__note { color: var(--ds-text-muted); font-size: var(--fs-xs); }

/* Lebdeća traka na telefonu: poziv, karta, hitno. */
.sec-haven-header .mobile-bar {
  background: rgba(250, 251, 250, 0.94);
  border-top: 1px solid var(--ds-line);
}
.sec-haven-header .mobile-bar__i {
  border-radius: var(--ds-r-md);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--primary);
  background: var(--ds-surface-soft);
}
.sec-haven-header .mobile-bar__i--cta {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(22, 36, 31, 0.6);
}
.sec-haven-header .mobile-bar__i--cta:hover { background: var(--accent-strong); }

/* --------------------------------------------------------------------------
   2 · Hero (KLAR)
   -------------------------------------------------------------------------- */

.sec-klar-hero .hero { background: var(--ds-bg); }

/* Zastor je u templatu upisan heksom, ne tokenom — zato ide iznova. */
.sec-klar-hero .hero__bg::after {
  background: linear-gradient(96deg,
    var(--ds-bg) 0%,
    var(--ds-bg) 42%,
    rgba(250, 251, 250, 0.88) 56%,
    rgba(250, 251, 250, 0.34) 78%,
    rgba(250, 251, 250, 0) 100%);
}
.sec-klar-hero .hero__bg :is(img, video) { object-position: 76% center; }

.sec-klar-hero .hero__glow {
  background: radial-gradient(closest-side, rgba(22, 124, 107, 0.20), transparent 70%);
}

.sec-klar-hero .hero__copy { max-width: 34rem; }
.sec-klar-hero .hero h1 {
  max-width: 16ch;
  line-height: 1.06;
  color: var(--primary);
}
.sec-klar-hero .u-hl {
  --hl: var(--ds-accent-tint);
  color: var(--primary);
  border-radius: var(--ds-r-sm);
}
.sec-klar-hero .hero__lead {
  max-width: 40ch;
  color: var(--ds-text-muted);
}
.sec-klar-hero .u-label { color: var(--accent); }

.sec-klar-hero .u-btn { border-radius: var(--ds-r-md); font-weight: 700; }
.sec-klar-hero .u-btn--lg { min-height: 58px; padding: 17px 28px; font-size: var(--fs-md); }
.sec-klar-hero .u-btn--solid { --btn-bg: var(--accent); }
.sec-klar-hero .u-btn--solid:hover { --btn-bg: var(--accent-strong); }
.sec-klar-hero .u-btn--line {
  --btn-fg: var(--primary);
  --btn-bd: var(--ds-line-strong);
  background: rgba(255, 255, 255, 0.6);
}
.sec-klar-hero .u-btn--line:hover { --btn-bd: var(--primary); background: #fff; }

.sec-klar-hero .u-sticker {
  --st-bg: var(--ds-warm);
  --st-fg: #2a1c07;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  box-shadow: var(--ds-sh-sm);
}
.sec-klar-hero .hero__price-tx { color: var(--ds-text-muted); }

/* --------------------------------------------------------------------------
   3 · Usluge (Meridian)
   -------------------------------------------------------------------------- */

.sec-meridian-services .u-section--alt { background: var(--ds-bg-alt); }
.sec-meridian-services .u-label { color: var(--accent); }
.sec-meridian-services .u-head p { color: var(--ds-text-muted); }

.sec-meridian-services .svc {
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-sh-sm);
  transition: box-shadow 240ms ease, border-color 240ms ease, transform 240ms ease;
}
.sec-meridian-services .svc:hover {
  box-shadow: var(--ds-sh-md);
  border-color: var(--ds-line-strong);
  transform: translateY(-3px);
}
.sec-meridian-services .svc__ic {
  width: 52px; height: 52px;
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  color: var(--accent-strong);
}
.sec-meridian-services .svc__ic svg { width: 26px; height: 26px; }
.sec-meridian-services .svc h3 { font-size: var(--ds-fs-h4); }
.sec-meridian-services .svc p { color: var(--ds-text-muted); font-size: var(--fs-base); }

/* Kartica dežurstva nosi topli rub — to je razlog zbog kojeg se sajt zove
   kako se zove. */
.sec-meridian-services .svc--urgent {
  background: var(--ds-warm-soft);
  border-color: rgba(226, 150, 58, 0.4);
}
.sec-meridian-services .svc--urgent .svc__ic {
  background: rgba(226, 150, 58, 0.22);
  color: #9a5a12;
}

.sec-meridian-services .svc__ask {
  margin-top: auto;
  padding-top: var(--sp-3, 16px);
  font-weight: 700;
  color: var(--accent-strong);
}
.sec-meridian-services .svc__ask:hover { color: var(--primary); }

/* --------------------------------------------------------------------------
   4 · Recenzije (Bloom)
   -------------------------------------------------------------------------- */

.sec-bloom-referenzen .u-section { background: var(--ds-bg); }
.sec-bloom-referenzen .u-label { color: var(--accent); }
.sec-bloom-referenzen .u-head p { color: var(--ds-text-muted); }
.sec-bloom-referenzen .u-stars { color: var(--ds-star); }

.sec-bloom-referenzen .gsum {
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-sh-sm);
}
.sec-bloom-referenzen .gsum__score strong { color: var(--primary); }
.sec-bloom-referenzen .gsum__count { color: var(--ds-text-muted); }
.sec-bloom-referenzen .gsum__bar { background: var(--ds-line); border-radius: 999px; }
.sec-bloom-referenzen .gsum__bar i { background: var(--ds-star); border-radius: 999px; }
.sec-bloom-referenzen .gsum__link { color: var(--accent-strong); font-weight: 700; }

.sec-bloom-referenzen .rev {
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-sh-xs);
}
.sec-bloom-referenzen .rev__av {
  background: var(--accent);
  color: #fff;
  border-radius: var(--ds-r-circle, 50%);
  font-family: var(--ff-display);
  font-weight: 800;
}
.sec-bloom-referenzen .rev__who strong { color: var(--primary); }
.sec-bloom-referenzen .rev__tx { color: var(--ds-text); }

/* Traka je crtana za šest recenzija koje se listaju ustranu; baza ih nosi
   dvije, pa listanja nema — kartice dijele red na pola i prelamaju se na
   telefonu. Dirnuti su samo `flex`, `flex-wrap` i `overflow`; nijedno nije
   među zaključanim svojstvima rasporeda, a `display: flex` ostaje. */
.sec-bloom-referenzen .revs__rail {
  flex-wrap: wrap;
  overflow-x: visible;
  scroll-snap-type: none;
}
.sec-bloom-referenzen .rev {
  flex: 1 1 calc(50% - 16px);
  scroll-snap-align: none;
}
@media (max-width: 640px) {
  .sec-bloom-referenzen .rev { flex: 1 1 100%; }
}

/* Dugme ispod recenzija: otkriva višak preko tri, ili vodi na Google. */
.sec-bloom-referenzen .revs__more {
  margin: clamp(22px, 3vw, 34px) 0 0;
  text-align: center;
}
.sec-bloom-referenzen .rev-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid var(--ds-line-strong);
  background: var(--ds-white);
  color: var(--primary);
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.sec-bloom-referenzen .rev-more svg { width: 18px; height: 18px; }
.sec-bloom-referenzen .rev-more:hover {
  background: var(--ds-surface);
  border-color: var(--primary);
  color: var(--accent-strong);
}

/* Strelice nisu u markupu dok su recenzije dvije; stil ostaje da ih vrati
   ako sljedeći paket donese više od dvije. */
.sec-bloom-referenzen .rnav {
  border-radius: 999px;
  border: 1px solid var(--ds-line-strong);
  background: var(--ds-white);
  color: var(--primary);
}
.sec-bloom-referenzen .rnav:hover:not(:disabled) { background: var(--ds-surface); }
.sec-bloom-referenzen .rnav:disabled { opacity: 0.28; cursor: default; }

/* --------------------------------------------------------------------------
   5 · Traka sa fotografijom ordinacije (Calm Clinical)
   -------------------------------------------------------------------------- */

/* Fotografija je uspravna (512×640), a traka široka — kadar se pomjera na
   sredinu gore da stolica i lampa ostanu u slici. */
.sec-calm-parallax .plx__bg :is(img, video) { object-position: center 42%; }

/* Zatamnjenje ide taman toliko da tekst bude čitljiv — fotografija mora
   ostati fotografija. */
.sec-calm-parallax .plx__veil {
  background: linear-gradient(180deg,
    rgba(14, 27, 23, 0.82) 0%,
    rgba(14, 27, 23, 0.72) 45%,
    rgba(14, 27, 23, 0.84) 100%);
}
.sec-calm-parallax .plx__eyebrow {
  color: var(--ds-accent-lite);
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}
.sec-calm-parallax .plx__title { color: #fff; }
.sec-calm-parallax .plx__lead { color: var(--ds-on-dark-mu); max-width: 54ch; }
.sec-calm-parallax .plx__num {
  font-family: var(--ff-display);
  font-weight: 800;
  color: #fff;
}
.sec-calm-parallax .plx__label { color: var(--ds-on-dark-mu); }
.sec-calm-parallax .plx__stats li { border-color: var(--ds-line-dark); }
.sec-calm-parallax .u-btn--white {
  --btn-bg: #fff;
  --btn-fg: var(--primary);
  border-radius: var(--ds-r-md);
  font-weight: 700;
}
.sec-calm-parallax .u-btn--white:hover { --btn-bg: var(--ds-surface); }

/* --------------------------------------------------------------------------
   6 · O ordinaciji (Sightline)
   -------------------------------------------------------------------------- */

.sec-sightline-about .u-section { background: var(--ds-bg); }
.sec-sightline-about .u-label { color: var(--accent); }

.sec-sightline-about .u-card { border-radius: var(--ds-r-lg); border-color: var(--ds-line); }
.sec-sightline-about .u-card--lg { border-radius: var(--ds-r-2xl); }

/* Na širokom ekranu okvir je visok 470 px. Fotografija je položena
   (800×434), pa se u tako visokom okviru mora kadrirati — kadar je zato
   pomjeren udesno (70 %), da osmijeh ostane cio u slici, a ne presječen
   ivicom. Lijevo se gubi dio drške četkice, što je najmanja šteta. */
.sec-sightline-about .about__media img {
  height: 470px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 70% center;
  box-shadow: var(--ds-sh-lg);
}

/* Kad se sekcija složi u jedan stubac (≤ 940 px), visina ide na auto:
   fotografija se tada vidi cijela, u svom omjeru i bez kadriranja. */
@media (max-width: 940px) {
  .sec-sightline-about .about__media img {
    height: auto;
    aspect-ratio: 800 / 434;
    object-position: center;
  }
}

.sec-sightline-about .about__lead { color: var(--ds-text-muted); font-size: var(--fs-lg); }
.sec-sightline-about .about__points li { color: var(--ds-text-muted); }
.sec-sightline-about .about__points li strong { color: var(--primary); }
.sec-sightline-about .about__points svg {
  color: var(--accent);
  background: var(--ds-surface);
  border-radius: 999px;
  padding: 4px;
  width: 26px; height: 26px;
}

.sec-sightline-about .about__sign-in {
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-sh-sm);
}
.sec-sightline-about .about__sign-in img {
  border-radius: 999px;
  object-fit: cover;
  object-position: center 18%;
}
.sec-sightline-about .about__sign-in strong { color: var(--primary); font-family: var(--ff-display); }
.sec-sightline-about .about__sign-in span { color: var(--ds-text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   7 · Prije i poslije (Rowan)
   -------------------------------------------------------------------------- */

.sec-rowan-results .u-section { background: var(--ds-bg-alt); }
.sec-rowan-results .u-label { color: var(--accent); }
.sec-rowan-results .u-head p { color: var(--ds-text-muted); }

.sec-rowan-results .case {
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-sh-sm);
  overflow: hidden;
}
/* Fotografije su 900×491, a okvir templata je 4:3 — u njemu bi uglovi usana
   ispali iz kadra. Okvir uzima omjer fotografije. */
.sec-rowan-results .cmp {
  aspect-ratio: 900 / 491;
  border-radius: var(--ds-r-md);
  overflow: hidden;
}
.sec-rowan-results .cmp :is(img, video) { object-position: center; }
.sec-rowan-results .cmp__tag {
  background: rgba(14, 27, 23, 0.72);
  color: #fff;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sec-rowan-results .cmp__line { background: #fff; box-shadow: 0 0 0 1px rgba(14, 27, 23, 0.25); }

/* Ručica je u templatu nacrtana na palcu `input[type=range]`, a pregledači
   palac po visini slažu različito — ovdje je ispadao uz gornju ivicu i sa
   samo jednom strelicom. Palac zato ostaje providan (i dalje hvata
   prevlačenje preko cijele slike, kako templat i traži), a ručicu crta
   linija razdvajanja: ona već prati `--x`, pa se centrira bez diranja
   rasporeda sekcije. */
.sec-rowan-results .cmp__range::-webkit-slider-thumb {
  background: transparent;
  box-shadow: none;
}
.sec-rowan-results .cmp__range::-moz-range-thumb {
  background: transparent;
  box-shadow: none;
}
.sec-rowan-results .cmp__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: var(--thumb, 44px);
  height: var(--thumb, 44px);
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316241f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8 6 12l4 4'/%3E%3Cpath d='M14 8l4 4-4 4'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
  box-shadow: var(--ds-sh-md);
  pointer-events: none;
}

.sec-rowan-results .case__b {
  border-radius: 999px;
  border: 1px solid var(--ds-line-strong);
  background: var(--ds-white);
  color: var(--primary);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.sec-rowan-results .case__b:hover,
.sec-rowan-results .case__b.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.sec-rowan-results .case h3 { font-size: var(--ds-fs-h4); }
.sec-rowan-results .case p { color: var(--ds-text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   8 · Radovi (Fundament)
   -------------------------------------------------------------------------- */

.sec-fundament-instagram .u-section { background: var(--ds-bg); }

/* Templat čuva 88 px lijevo za uspravnu traku koja u ovom rasporedu ne
   postoji — sekcija je zato stajala uvučena u odnosu na sve ostale.
   Poravnava se sa istim `--gutter` kao i one. */
@media (min-width: 1140px) {
  .sec-fundament-instagram .u-container { padding-left: var(--gutter); }
}
.sec-fundament-instagram .u-label { color: var(--accent); }
.sec-fundament-instagram .u-head p { color: var(--ds-text-muted); }

.sec-fundament-instagram .ig__profile {
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  padding: 8px 18px 8px 8px;
  box-shadow: var(--ds-sh-xs);
}
.sec-fundament-instagram .ig__profile:hover { border-color: var(--ds-line-strong); }
.sec-fundament-instagram .ig__profile-ic {
  background: #1877f2;
  color: #fff;
  border-radius: 999px;
  width: 40px; height: 40px;
}
.sec-fundament-instagram .ig__profile-ic svg { width: 22px; height: 22px; }
.sec-fundament-instagram .ig__profile-tx strong { color: var(--primary); font-family: var(--ff-display); }
.sec-fundament-instagram .ig__profile-tx small { color: var(--ds-text-muted); }

.sec-fundament-instagram .reel {
  border-radius: var(--ds-r-lg);
  overflow: hidden;
  box-shadow: var(--ds-sh-sm);
  background: var(--ds-white);
}
/* Templat je crtan za uspravan video (9:16); ovdje su kvadratne fotografije
   složene u panele, pa bi uski okvir odsjekao lijevu i desnu stranu. */
.sec-fundament-instagram .reel__link { aspect-ratio: 1; }
.sec-fundament-instagram .reel__link img { object-position: center; }
.sec-fundament-instagram .reel__meta {
  background: linear-gradient(180deg, rgba(14, 27, 23, 0) 0%, rgba(14, 27, 23, 0.86) 100%);
  color: #fff;
}
.sec-fundament-instagram .reel__meta strong { font-family: var(--ff-display); font-weight: 800; }
.sec-fundament-instagram .reel__meta small { color: rgba(255, 255, 255, 0.82); }

/* --------------------------------------------------------------------------
   9 · Pitanja (Nordlicht)
   -------------------------------------------------------------------------- */

/* Templat je ovdje tamnoplav; sajt je svijetao, pa je platno svijetlo, a
   panel bijel. */
.sec-nordlicht-faq {
  --c-canvas:      var(--ds-bg-alt);
  --c-canvas-lt:   var(--ds-surface);
  --c-canvas-dp:   var(--ds-ink);
  --c-panel:       var(--ds-white);
  --c-panel-alt:   var(--ds-white);
  --c-on-canvas:   var(--ds-text);
  --c-on-canvas-mu: var(--ds-text-muted);
  --c-line-canvas: var(--ds-line);
  --panel-gap: 0px;
}
/* Panel je u templatu bijela kartica koja lebdi nad platnom. Ovdje ide
   ravno: bez zaobljenja, ivice, sjenke i bijele podloge — sekcija je jedna
   mirna traka, a sadržaj drži `.u-inner` na istoj širini kao svugdje. */
.sec-nordlicht-faq .u-panel {
  margin-inline: 0;
  margin-bottom: 0;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}
.sec-nordlicht-faq .u-panel--alt { background: transparent; }
.sec-nordlicht-faq .u-kicker {
  color: var(--accent);
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}
.sec-nordlicht-faq .faq__all {
  border-radius: 999px;
  border: 1px solid var(--ds-line-strong);
  background: var(--ds-white);
  color: var(--primary);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.sec-nordlicht-faq .faq__all:hover { background: var(--ds-surface); }

.sec-nordlicht-faq .qa { border-bottom: 1px solid var(--ds-line); }
.sec-nordlicht-faq .qa__q button { color: var(--primary); }
.sec-nordlicht-faq .qa__t { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-md); }
.sec-nordlicht-faq .qa__in p { color: var(--ds-text-muted); }
.sec-nordlicht-faq .qa__in a { color: var(--accent-strong); font-weight: 600; }

/* Odgovor je u templatu uvučena kartica: vlastita podloga, zaobljenje,
   unutrašnji razmak i akcentna crta slijeva. Ovdje ide golo i poravnato sa
   pitanjem iznad — isti uvlak koji nosi dugme pitanja. */
.sec-nordlicht-faq .qa__in > p {
  margin: 0 clamp(20px, 2.4vw, 30px) clamp(14px, 1.4vw, 20px);
  padding: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}

/* Templat stilizuje samo <p>, pa nabrajanje bez ovoga visi lijevo od
   odgovora. Isti uvlak, ista linija. */
.sec-nordlicht-faq .qa__ul {
  margin: 0 clamp(20px, 2.4vw, 30px) clamp(14px, 1.4vw, 20px);
  padding-left: 0;
  list-style: none;
  color: var(--ds-text-muted);
}

@media (max-width: 720px) {
  .sec-nordlicht-faq .qa__in > p,
  .sec-nordlicht-faq .qa__ul { margin-inline: var(--sp-4); }
}
.sec-nordlicht-faq .qa__ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  line-height: 1.5;
}
.sec-nordlicht-faq .qa__ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.58em;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--ds-warm);
}

/* --------------------------------------------------------------------------
   10 · Poziv na kontakt (Atelier)
   -------------------------------------------------------------------------- */

.sec-atelier-cta .cta { background: var(--ds-ink); color: var(--ds-on-dark); }
.sec-atelier-cta .cta h2 { color: #fff; }
.sec-atelier-cta .u-em { color: var(--ds-accent-lite); }
.sec-atelier-cta .cta__lead { color: var(--ds-on-dark-mu); }
.sec-atelier-cta .cta__arch { border-color: rgba(99, 200, 180, 0.32); }
.sec-atelier-cta .u-marker {
  color: var(--ds-accent-lite);
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}
.sec-atelier-cta .cta__or { color: rgba(233, 241, 238, 0.55); }

.sec-atelier-cta .u-btn { border-radius: var(--ds-r-md); font-weight: 700; }
.sec-atelier-cta .u-btn--wa { --btn-bg: var(--ds-wa); --btn-fg: #fff; }
.sec-atelier-cta .u-btn--wa:hover { --btn-bg: var(--ds-wa-dk); }
.sec-atelier-cta .u-btn--ivory { --btn-bg: #fff; --btn-fg: var(--ds-ink); }
.sec-atelier-cta .u-btn--ivory:hover { --btn-bg: var(--ds-surface); }

.sec-atelier-cta .cta__facts li { border-color: var(--ds-line-dark); }
.sec-atelier-cta .cta__facts span { color: var(--ds-accent-lite); letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--fs-xs); font-weight: 700; }
.sec-atelier-cta .cta__facts strong { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   11 · Podnožje (Bloom) — jednostavno: ko si, gdje si, i karta
   -------------------------------------------------------------------------- */

.sec-bloom-footer .ftr { background: var(--ds-ink-deep); }

/* Podnožje nosi tri bloka umjesto pet: stupci bez podatka su uklonjeni,
   a telefon, radno vrijeme i adresa stoje u sekciji iznad. */
.sec-bloom-footer .ftr__grid--slim { grid-template-columns: 1.6fr 1fr; }

.sec-bloom-footer .ftr__logo-tx strong { font-size: 1.24rem; color: #fff; }
.sec-bloom-footer .ftr__logo-tx small {
  color: var(--ds-on-dark-mu);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.sec-bloom-footer .ftr__blurb { color: var(--ds-on-dark-mu); max-width: 40ch; }

.sec-bloom-footer .ftr__social a {
  border: 1px solid var(--ds-line-dark);
  border-radius: 999px;
  color: var(--ds-on-dark);
  background: rgba(233, 241, 238, 0.05);
}
.sec-bloom-footer .ftr__social a:hover { border-color: var(--ds-accent-lite); background: rgba(233, 241, 238, 0.1); }

.sec-bloom-footer .ftr__col h3 {
  color: var(--ds-accent-lite);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sec-bloom-footer .ftr__col a { color: var(--ds-on-dark-mu); }
.sec-bloom-footer .ftr__col a:hover { color: #fff; }

.sec-bloom-footer .ftr__map {
  border-radius: var(--ds-r-xl);
  border-color: var(--ds-line-dark);
  background: rgba(233, 241, 238, 0.04);
}
.sec-bloom-footer .ftr__map:hover { border-color: var(--ds-accent-lite); }

/* Ugrađena Google karta na mjestu ranijeg placeholdera. Okvir je element
   mreže, pa se sam blokira — visinu i ivicu postavlja ovo pravilo. */
.sec-bloom-footer .ftr__map-frame {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
}
@media (max-width: 640px) {
  .sec-bloom-footer .ftr__map-frame { min-height: 220px; }
}
.sec-bloom-footer .ftr__map-go:hover { color: #fff; }
.sec-bloom-footer .ftr__map-tx address { font-style: normal; }
.sec-bloom-footer .ftr__map-tx strong { color: #fff; font-family: var(--ff-display); font-size: 1.05rem; }
.sec-bloom-footer .ftr__map-tx small { color: var(--ds-on-dark-mu); }
.sec-bloom-footer .ftr__map-go { color: var(--ds-accent-lite); font-weight: 700; font-size: var(--fs-sm); }

.sec-bloom-footer .ftr__bar { border-top: 1px solid var(--ds-line-dark); }
.sec-bloom-footer .ftr__bar p { color: rgba(233, 241, 238, 0.6); font-size: var(--fs-xs); }
.sec-bloom-footer .ftr__top {
  border-radius: 999px;
  border: 1px solid var(--ds-line-dark);
  color: var(--ds-on-dark);
  background: transparent;
  font-weight: 700;
  font-size: var(--fs-sm);
}
.sec-bloom-footer .ftr__top:hover { border-color: var(--ds-accent-lite); color: #fff; }

/* ==========================================================================
   4. LEBDEĆE WHATSAPP DUGME
   Moj element, izvan sekcija. Na telefonu lebdi u donjem desnom uglu, iznad
   trake sa radnjama koju nosi zaglavlje; na širokom ekranu ga zamjenjuje
   dugme u zaglavlju, pa se ne pojavljuje dvaput.
   ========================================================================== */

.wa-float {
  position: fixed;
  right: 14px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  background: var(--ds-wa);
  color: #fff;
  font-family: 'Nunito Variable', Nunito, system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.9375rem;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(14, 27, 23, 0.65), 0 2px 6px rgba(14, 27, 23, 0.2);
  transition: background-color 160ms ease, transform 200ms ease;
}
.wa-float svg { width: 22px; height: 22px; flex: none; }
.wa-float:hover { background: var(--ds-wa-dk); transform: translateY(-2px); }
.wa-float:active { transform: translateY(0); }

/* Širok ekran: WhatsApp već stoji u zaglavlju. */
@media (min-width: 1001px) {
  .wa-float { display: none; }
}

/* ==========================================================================
   4b. PROZOR SA FOTOGRAFIJAMA (assets/site.js)
   Moj element, izvan sekcija. Sa posljednje slike „naprijed" nosi ikonu
   Facebooka, jer tada vodi na tuđu adresu.
   ========================================================================== */

.lb-open, .lb-open body { overflow: hidden; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 32px);
}
.lb[hidden] { display: none; }

.lb__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 17, 0.9);
  border: 0;
  cursor: zoom-out;
}

.lb__panel {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(980px, 100%);
  max-height: 100%;
  /* Providnost se NE animira. I prelaz i animacija stoje dok pregledač ne
     crta kadrove, pa bi prozor u tom slučaju zauvijek ostao na
     `opacity: 0` — nevidljiv, a otvoren. Animira se samo pomak: ako
     kadrovi izostanu, prozor je vidljiv, tek pomjeren za 10 px. */
  opacity: 1;
}
.lb.is-open .lb__panel { animation: lb-in 260ms cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes lb-in {
  from { translate: 0 10px; }
}

.lb__fig {
  margin: 0;
  display: grid;
  gap: 12px;
  justify-items: center;
  min-height: 0;
}
.lb__img {
  max-width: 100%;
  max-height: min(70vh, 720px);
  width: auto;
  border-radius: var(--ds-r-lg);
  background: var(--ds-ink-deep);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}
.lb__cap {
  display: grid;
  gap: 2px;
  text-align: center;
  color: #fff;
  font-family: 'Nunito Variable', Nunito, system-ui, sans-serif;
}
.lb__cap strong { font-size: 1.0625rem; font-weight: 800; }
.lb__cap small { color: rgba(255, 255, 255, 0.72); font-size: 0.875rem; }

.lb__count {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.lb__nav,
.lb__close {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.lb__nav svg, .lb__close svg { width: 24px; height: 24px; }
.lb__nav:hover:not(:disabled),
.lb__close:hover { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.5); }
.lb__nav:disabled { opacity: 0.25; cursor: default; }

.lb__nav--prev { left: -8px; top: calc(50% - 46px); }
.lb__nav--next { right: -8px; top: calc(50% - 46px); }
.lb__close { top: -6px; right: -6px; }

/* Kad „naprijed" vodi na Facebook, dugme to i pokaže. */
.lb__nav.is-fb {
  background: #1877f2;
  border-color: #1877f2;
}
.lb__nav.is-fb:hover { background: #1465d8; border-color: #1465d8; }

@media (max-width: 720px) {
  .lb__panel { gap: 10px; }
  .lb__img { max-height: 58vh; }
  .lb__nav--prev { left: 2px; top: auto; bottom: -4px; }
  .lb__nav--next { right: 2px; top: auto; bottom: -4px; }
  .lb__close { top: -4px; right: -2px; }
  .lb__count { padding-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb.is-open .lb__panel { animation: none; }
}

/* ==========================================================================
   5. TELEFON — odluke se donose na 375 px
   ========================================================================== */

@media (max-width: 900px) {
  :root { --ds-header-h: 64px; }
}

/* --- Hero: tekst silazi ISPOD fotografije ---------------------------------
   Ispod 640 px hero se slaže u tri bloka: zaglavlje, fotografija kao vlastiti
   blok, pa tekst na punoj podlozi. Zatamnjenja tada nema — ono je postojalo
   samo zato što je tekst bio preko slike. Na širem ekranu se ništa ne dira.  */

@media (max-width: 640px) {
  .sec-klar-hero .hero {
    min-height: 0;
    padding-block: calc(var(--ds-header-h) + 14px) 34px;
  }

  /* Pozadinska slika postaje običan blok u toku, prvi u redu. */
  .sec-klar-hero .hero__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    margin-inline: var(--ds-gutter);
    margin-bottom: 26px;
    border-radius: var(--ds-r-lg);
    box-shadow: var(--ds-sh-md);
  }
  .sec-klar-hero .hero__bg :is(img, video) {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
  }
  .sec-klar-hero .hero__bg::after { background: none; }
  .sec-klar-hero .hero__glow { opacity: 0.5; }

  .sec-klar-hero .hero__copy > * + * { margin-top: 14px; }
  .sec-klar-hero .hero h1 { max-width: 100%; font-size: 2.0625rem; }
  .sec-klar-hero .hero__lead { font-size: 1rem; line-height: 1.5; }

  /* Jedno dugme je glavno: poziv preko cijele širine, WhatsApp lakši. */
  .sec-klar-hero .hero__cta { gap: 10px; }
  .sec-klar-hero .hero__cta .u-btn--solid { width: 100%; min-height: 56px; }
  .sec-klar-hero .hero__second {
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    font-size: var(--fs-sm);
    background: transparent;
    --btn-bd: var(--ds-line);
  }

  /* Traka sa podacima: jedan stubac, nikad prelom u 2+1. */
  .sec-klar-hero .hero__price { gap: 10px; }
  .sec-klar-hero .hero__price-tx { font-size: var(--fs-sm); }
}

/* --- vertikalni ritam na telefonu ----------------------------------------
   Sve sekcije dobijaju 40 px gore i dolje. Većina ih čita iz `--section-y`
   (odnosno `--panel-y`), a traka sa fotografijom, poziv na kontakt i
   podnožje nose vlastite vrijednosti, pa se navode posebno. Podnožju ostaje
   donji razmak za lebdeću traku sa radnjama — bez njega ga ona prekrije. */

@media (max-width: 640px) {
  .sec-haven-header,
  .sec-klar-hero,
  .sec-meridian-services,
  .sec-bloom-referenzen,
  .sec-calm-parallax,
  .sec-sightline-about,
  .sec-rowan-results,
  .sec-fundament-instagram,
  .sec-nordlicht-faq,
  .sec-atelier-cta,
  .sec-bloom-footer {
    --section-y: 40px;
    --panel-y: 40px;
  }

  .sec-calm-parallax .plx { padding-block: 40px; }
  .sec-atelier-cta .cta { padding-block: 40px; }
  .sec-bloom-footer .ftr { padding-block: 40px calc(40px + 88px); }
}

/* --- ostatak sajta na telefonu ------------------------------------------- */

@media (max-width: 640px) {
  .sec-meridian-services .svc { border-radius: var(--ds-r-md); }
  .sec-rowan-results .case { border-radius: var(--ds-r-md); }
  .sec-fundament-instagram .reel { border-radius: var(--ds-r-md); }
  .sec-nordlicht-faq .u-panel { border-radius: var(--ds-r-xl); }
  .sec-bloom-footer .ftr__grid--slim { grid-template-columns: 1fr; }

  /* Templat ispod 520 px steže mrežu na 320 px, pa je sekcija uža od svih
     ostalih i ostavlja prazninu s desne strane. Kartice idu punom širinom
     stupca, kao svugdje. */
  .sec-fundament-instagram .ig__grid { max-width: none; }
}

@media (max-width: 380px) {
  .wa-float { padding: 11px 15px 11px 12px; font-size: 0.875rem; }
  .wa-float svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   6. ŠTAMPA
   Sekcije gase svoje lebdeće elemente u vlastitom @media print; ovdje ide
   samo ono što je moje.
   ========================================================================== */

@media print {
  .wa-float, .lb { display: none; }
  .sec-bloom-footer .ftr__map-frame { display: none; }
  body { background: #fff; }
}