/* ============================================================
   Stomatološka ordinacija „Moj osmijeh" — stil sajta.

   Učitava se POSLIJE svih sekcijskih stilova i poslije
   `sekcije/brend.css`, i samo ih nadjačava. Nijedan sekcijski
   fajl nije mijenjan.

   Ovdje se NE dira nijedno svojstvo rasporeda iz UPUTA.md:
   display, grid-template-*, grid-area, flex-direction, order,
   position, top/right/bottom/left, align-*, justify-*, text-align.
   Sve što slijedi su boje, pismo, veličine, razmaci, zaobljenja,
   sjenke, pozadine i kadar slike.

   Sadržaj
     1. Paleta i skala
     2. Dokument
     3. Pismo i tokeni po sekciji
     4. Zaglavlje
     5. Hero
     6. Usluge
     7. Recenzije
     8. Paralaksa
     9. O ordinaciji
    10. Prije i poslije
    11. Pitanja
    12. Kontakt
    13. Podnožje
    14. Telefon — zajedničko
   ============================================================ */

/* ============================================================
   1. PALETA I SKALA

   Boje su izmjerene iz logotipa ordinacije
   (`images/logo/…webp`, plavi zub na crnom) i iz objave sa
   znakom firme (`images/gallery/e41bcce9…`, bijeli natpis na
   plavoj podlozi): plava #18549C–#489CD8 u znaku, #0A46A0 na
   objavi, zlatna #B8A038 na kružnom znaku. Nisu birane od oka.

   Ove četiri vrijednosti `sekcije/brend.css` razvodi po svim
   sekcijama — mijenja se ovdje, na jednom mjestu.
   ============================================================ */

:root {
  --primary:        #0C2140;   /* tamnoplava — crna podloga znaka */
  --primary-fg:     #ffffff;
  --accent:         #1160B4;   /* plava iz znaka i sa objave */
  --accent-fg:      #ffffff;
  --accent-strong:  #0C4A8E;   /* hover i tekst na svijetlom (8,3:1) */
  --accent-soft:    #E7EFF9;   /* podloge značaka i mrlja */
  --accent-lite:    #7FB6EE;   /* jedina koja se koristi NA tamnom (7,7:1) */
  --gold:           #A67C10;   /* zvjezdice — zlatna sa znaka, potamnjena */

  /* Pismo: opšta stomatološka praksa → zaobljeni naslovi (UPUTA.md).
     Oba su iz paketa i učitavaju se iz `assets/css/fonts.css`. */
  --font-head: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-text: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Visina zaglavlja pod DRUGIM imenom: `.sec-x { --header-h: var(--header-h) }`
     je ciklus i tiho padne u `auto`. */
  --head-h: 72px;

  --wrap: 1160px;
  --rhythm: clamp(64px, 8vw, 112px);
}

@media (max-width: 760px) {
  :root { --head-h: 62px; }
}

/* ============================================================
   2. DOKUMENT
   ============================================================ */

html {
  background: #ffffff;
  scroll-padding-top: calc(var(--head-h) + 16px);
  /* `clip` klipuje bez pravljenja scroll kontejnera; `hidden` bi
     razbio ljepljivo zaglavlje i ljepljivu pozadinu paralakse. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: #ffffff;
  color: #1E2A3D;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

.band { position: relative; }

/* Ista širina kroz cijeli sajt — sekcije su donijele 1120–1240 px. */
.sec .u-container { max-width: var(--wrap); }

/* Odlomak koji je na telefonu višak (vidi §5). */
@media (max-width: 760px) {
  .u-wide-only { display: none; }
}

/* ============================================================
   3. PISMO I TOKENI PO SEKCIJI

   Svaka sekcija nosi `--ff-display` i `--ff-body` iz svog
   templata — Raleway, Fraunces, Poppins, Figtree, Manrope,
   Quicksand, Sora … osam različitih porodica, i nijedna nije u
   paketu. Ovdje se sve prevežu na jedan par, pa sekcija i dalje
   koristi svoje varijable — samo one sada pokazuju na isto.
   ============================================================ */

.sec-housecall-header,
.sec-atelier-hero,
.sec-calm-services,
.sec-atelier-referenzen,
.sec-bloom-parallax,
.sec-atelier-about,
.sec-meridian-results,
.sec-housecall-faq,
.sec-sonnenschein-cta,
.sec-aperta-footer {
  --ff-display: var(--font-head);
  --ff-body: var(--font-text);

  --header-h: var(--head-h);
  --maxw: var(--wrap);
  --section-y: var(--rhythm);
  --gutter: clamp(20px, 5vw, 44px);

  /* Neutrali — sekcije su donijele tri različita seta (topla
     slonovača, hladno plava, šljiva). Jedan set za cijeli sajt. */
  --c-bg: #ffffff;
  --c-bg-alt: #F3F7FC;
  --c-white: #ffffff;
  --c-surface: #E7EFF9;
  --c-surface-soft: #F3F7FC;
  --c-surface-warm: #F3F7FC;
  --c-ink: #0C2140;
  --c-ink-soft: #1E2A3D;
  --c-ink-70: rgba(12, 33, 64, 0.70);
  --c-ink-12: rgba(12, 33, 64, 0.12);
  --c-ink-06: rgba(12, 33, 64, 0.06);
  --c-text: #1E2A3D;
  --c-text-muted: #55637A;          /* 5,96:1 na bijeloj */
  --c-text-invert: #F2F7FD;
  --c-line: rgba(12, 33, 64, 0.12);
  --c-line-strong: rgba(12, 33, 64, 0.26);
  --c-line-invert: rgba(242, 247, 253, 0.22);
  --c-line-dark: rgba(234, 241, 250, 0.22);
  --c-border: rgba(12, 33, 64, 0.12);
  --c-border-strong: rgba(12, 33, 64, 0.26);
  --c-on-dark: #EAF1FA;
  --c-on-dark-mu: rgba(234, 241, 250, 0.78);
  --c-star: var(--gold);
  --c-whatsapp: #12856F;            /* 4,6:1 sa bijelim tekstom */
  --c-whatsapp-dk: #0D6353;

  /* Zaobljenja — jedan set (sekcije su nosile 6–28 px raspona). */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 26px;
  --r-img: 14px;
  --r-pill: 999px;
  --r-circle: 50%;
  --r-squircle: 42% 58% 54% 46% / 54% 44% 56% 46%;

  /* Sjenke — hladne, plitke, jedne za cijeli sajt. */
  --sh-xs: 0 1px 2px rgba(12, 33, 64, 0.06);
  --sh-sm: 0 4px 14px -6px rgba(12, 33, 64, 0.12);
  --sh-md: 0 12px 30px -14px rgba(12, 33, 64, 0.22);
  --sh-lg: 0 22px 52px -22px rgba(12, 33, 64, 0.28);
  --sh-xl: 0 36px 80px -30px rgba(12, 33, 64, 0.34);

  --ls-tight: -0.02em;
  --ls-label: 0.14em;
}

/* Naslovi: Nunito je zaobljen i na 400 izgleda neispisano —
   skala težina je zato pomjerena, a veličine ostaju sekcijske. */
.sec h1, .sec h2, .sec h3, .sec h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}
.sec h1 { font-weight: 800; }

/* Fraunces je bio serif, pa su tri „atelier" sekcije naslov pisale
   kurzivom i tanko. Nunito u paketu nema kurziv — sintetički kosi
   Nunito izgleda kao greška, pa naglašeno ide bojom i težinom. */
.sec-atelier-hero .u-em,
.sec-atelier-referenzen .u-em,
.sec-atelier-about .u-em {
  font-style: normal;
  font-weight: 800;
  color: var(--accent-strong);
}
.sec-atelier-about .abt__v-no { font-style: normal; font-weight: 800; }

/* ============================================================
   4. ZAGLAVLJE
   ============================================================ */

/* `.site-head` je `position: sticky`, ali mu je roditelj sama
   sekcija zaglavlja — visoka koliko i traka. Sticky se drži
   roditeljevog okvira, pa bi traka otklizila poslije ~70 px.
   Ljepljivost se zato prebacuje na traku sastavljača, koja je
   unutar <main> i drži se kroz cijelu stranicu. Nijedna klasa
   sekcije se pritom ne dira. */
.band[data-band="1"] {
  position: sticky;
  top: 0;
  z-index: 100;
}

.sec-housecall-header .site-head {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid transparent;
}
.sec-housecall-header .site-head.is-stuck {
  border-bottom-color: var(--c-line);
  box-shadow: 0 8px 24px -20px rgba(12, 33, 64, 0.5);
}

.sec-housecall-header .brand__mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.sec-housecall-header .brand__mark img {
  width: auto;
  height: 34px;
  display: block;
}
.sec-housecall-header .brand__tx strong {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--c-ink);
}
.sec-housecall-header .brand__tx small {
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  color: var(--c-text-muted);
}

.sec-housecall-header .site-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
  padding-inline: 11px;
}
.sec-housecall-header .head-cta__tx,
.sec-housecall-header .head-wa__tx { white-space: nowrap; }
.sec-housecall-header .site-nav a:hover,
.sec-housecall-header .site-nav a.is-current { color: var(--accent-strong); }

.sec-housecall-header .u-btn { font-weight: 700; letter-spacing: 0.01em; }
.sec-housecall-header .head-cta { border-radius: var(--r-pill); }

/* WhatsApp u zaglavlju: na širokom ekranu je to jedino mjesto
   gdje dugme stoji (ljepljiva traka se javlja tek ispod 900 px). */
.sec-housecall-header .head-wa {
  min-height: 46px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--c-whatsapp);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}
.sec-housecall-header .head-wa:hover { background: var(--c-whatsapp-dk); color: #fff; }
.sec-housecall-header .head-wa svg { width: 19px; height: 19px; }

/* Između 941 px (gdje se meni još ne sklapa) i ~1180 px traka nosi
   znak, pet stavki menija i dva dugmeta — i prelije se preko desne
   ivice. Skida se ono što se ponavlja: podnaslov znaka (piše u
   podnožju) i ispisan broj (dugme zadržava `aria-label`). */
@media (max-width: 1180px) {
  .sec-housecall-header .brand__tx small { display: none; }
  .sec-housecall-header .site-nav a { font-size: 0.9rem; padding-inline: 9px; }
  .sec-housecall-header .head-cta__tx { display: none; }
  .sec-housecall-header .head-cta { padding: 11px 14px; }
}

@media (max-width: 900px) {
  /* Ispod 900 px WhatsApp preuzima ljepljiva traka na dnu, pa se
     dugme iz zaglavlja sklanja da traka ostane pregledna. */
  .sec-housecall-header .head-wa { display: none; }
}

.sec-housecall-header .menu { background: var(--c-white); }
.sec-housecall-header .menu a {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-ink);
}
.sec-housecall-header .menu li:last-child a { color: var(--accent-strong); }

.sec-housecall-header .mobile-bar__i {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 10px 26px -10px rgba(12, 33, 64, 0.45);
}
.sec-housecall-header .mobile-bar__i--call { background: var(--c-ink); }
.sec-housecall-header .mobile-bar__i--wa { background: var(--c-whatsapp); }

/* ============================================================
   5. HERO

   Zaglavlje je ljepljivo i U TOKU stranice (§4), a hero je
   crtan za zaglavlje koje lebdi: `padding-block-start` mu je
   `calc(var(--header-h) + …)`. Bez ispravke ostane prazan pojas
   visine cijelog zaglavlja ispod trake.
   ============================================================ */

.sec-atelier-hero .hero {
  background: var(--c-ink);
  padding-block: clamp(28px, 3.4vw, 52px) clamp(28px, 3vw, 44px);
}

/* ---------- Kadar hero fotografije ----------

   Fotografija je USPRAVNA (720x960), a hero je široka traka. Razvučena
   preko cijele širine (`object-fit: cover`) daje uski vodoravni isječak
   iz sredine slike — a lica su joj u GORNJIH 42 %: doktor 8–22 %,
   djevojčica 27–40 %. Zato je zatečeni kadar pokazivao samo mantil.
   Što je ekran širi, to je isječak uži, pa pomjeranje `object-position`
   samo po sebi ne pomaže.

   Rješenje iznad 900 px: fotografija prestaje biti pozadina cijele
   sekcije i postaje ploča uz desnu ivicu, širine bliske njenom omjeru —
   tada se vidi gotovo cijela, a tekst više ne stoji preko lica.

   `position` i `inset` su zaključani, pa se to radi bez njih:
   `max-width` sa `margin-left: auto` (uz `left: 0; right: 0` okvir je
   preodređen, pa lijeva margina pokupi ostatak i ploča ode desno). */

.sec-atelier-hero .hero__media :is(img, video) { object-position: 52% 4%; }

.sec-atelier-hero .hero__scrim {
  background:
    linear-gradient(180deg, rgba(8, 22, 44, 0.55) 0%, rgba(8, 22, 44, 0.16) 32%, rgba(8, 22, 44, 0.62) 78%, rgba(8, 22, 44, 0.90) 100%),
    linear-gradient(96deg, rgba(8, 22, 44, 0.82) 0%, rgba(8, 22, 44, 0.36) 48%, rgba(8, 22, 44, 0.04) 76%);
}

/* Tablet: traka je uža, pa je isječak sam po sebi visok (~80 % slike);
   dovoljno je zakačiti kadar za vrh da lica uđu. */
@media (min-width: 761px) and (max-width: 899px) {
  .sec-atelier-hero .hero { min-height: min(96svh, 840px); }
  .sec-atelier-hero .hero__media :is(img, video) { object-position: 50% 3%; }
}

/* Širok ekran: fotografija kao ploča uz desnu ivicu. */
@media (min-width: 900px) {
  .sec-atelier-hero .hero { min-height: 780px; }

  .sec-atelier-hero .hero__media {
    max-width: 580px;
    margin-left: auto;
    margin-right: 0;
    /* Lijeva ivica se rastapa u podlogu, da ploča ne bude nalijepljen
       pravougaonik. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
    mask-image: linear-gradient(90deg, transparent 0, #000 26%);
  }
  /* Okvir 580x~905 je skoro omjer same fotografije (0,75), pa se vidi
     cijela visina; vodoravno se odsijeca 15 %, izvan oba lica. */
  .sec-atelier-hero .hero__media :is(img, video) { object-position: 52% 50%; }

  /* Zatamnjenje sada treba samo tekstu, ne fotografiji. */
  .sec-atelier-hero .hero__scrim {
    background:
      linear-gradient(180deg, transparent 0%, transparent 58%, rgba(8, 22, 44, 0.45) 100%),
      linear-gradient(92deg, var(--c-ink) 0%, var(--c-ink) 34%, rgba(12, 33, 64, 0.72) 52%, rgba(12, 33, 64, 0) 68%);
  }

  /* Uvod i naslov ne smiju doći pod ploču. */
  .sec-atelier-hero .hero__copy { max-width: 36rem; }
  .sec-atelier-hero .hero__lead { max-width: 34rem; }
}

@media (min-width: 1500px) {
  .sec-atelier-hero .hero__media { max-width: 640px; }
  .sec-atelier-hero .hero__copy { max-width: 40rem; }
}

.sec-atelier-hero .hero__label {
  color: var(--accent-lite);
  letter-spacing: 0.16em;
  font-weight: 700;
}
.sec-atelier-hero .hero h1 { font-weight: 800; max-width: 15ch; }
.sec-atelier-hero .hero h1 .u-em { color: var(--accent-lite); font-weight: 800; }
.sec-atelier-hero .hero__lead {
  color: rgba(234, 241, 250, 0.90);
  max-width: 46ch;
}

.sec-atelier-hero .u-btn { font-weight: 700; letter-spacing: 0.01em; text-transform: none; font-size: 1rem; }
.sec-atelier-hero .u-btn--wa { --btn-bg: var(--c-whatsapp); --btn-fg: #fff; }
.sec-atelier-hero .u-btn--wa:hover { --btn-bg: var(--c-whatsapp-dk); }
.sec-atelier-hero .hero__ghost {
  --btn-bd: rgba(234, 241, 250, 0.52);
  font-weight: 600;
}

.sec-atelier-hero .hero__meta { border-top-color: rgba(234, 241, 250, 0.24); }
.sec-atelier-hero .hero__meta span {
  color: var(--accent-lite);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}
.sec-atelier-hero .hero__meta strong {
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
}
.sec-atelier-hero .hero__meta li { border-right-color: rgba(234, 241, 250, 0.2); }

/* ---------- Hero na telefonu: slika gore, tekst ispod ----------

   Ispod 760 px tekst silazi ISPOD fotografije (UPUTA.md). Bez
   toga bi trebalo zatamnjenje preko cijele slike, a zatamnjenje
   pojede fotografiju.

   `.hero__media` je `position: absolute; inset: -8% 0` — i
   `inset` i `position` su zaključani. Rješenje bez njih:
   zadata `height` isključi `bottom` (over-constrained), a
   `margin-top` na apsolutno pozicioniranom elementu se DODAJE
   na `top` i time poništi onih -8 %. Da procenat bude
   predvidiv broj, hero dobija zadatu `min-height`:
   8 % od 860 px = 69 px.

   `transform` ide sa `!important` jer ga skripta paralakse
   upisuje inline. */
@media (max-width: 760px) {
  .sec-atelier-hero .hero {
    min-height: 860px;
    padding-block: calc(58vw + 22px) 34px;
  }
  .sec-atelier-hero .hero__media {
    height: 58vw;
    margin-top: 69px;
    transform: none !important;
    border-bottom: 1px solid rgba(234, 241, 250, 0.16);
  }
  .sec-atelier-hero .hero__media :is(img, video) { object-position: 58% 38%; }

  /* Zatamnjenja nema jer tekst nije preko slike. */
  .sec-atelier-hero .hero__scrim { background: none; }

  .sec-atelier-hero .hero h1 { max-width: none; font-size: 2.5rem; }
  .sec-atelier-hero .hero__lead { font-size: 1.05rem; max-width: none; }

  /* Jedno dugme je glavno; drugo je lakše. */
  .sec-atelier-hero .hero__ghost {
    --btn-bd: rgba(234, 241, 250, 0.34);
    min-height: 54px;
    font-size: 0.95rem;
  }
  .sec-atelier-hero .hero__meta { padding-top: 20px; }
  .sec-atelier-hero .hero__meta strong { font-size: 1.05rem; }
}

@media (max-width: 400px) {
  .sec-atelier-hero .hero { min-height: 880px; }
  .sec-atelier-hero .hero__media { margin-top: 71px; }
  .sec-atelier-hero .hero h1 { font-size: 2.3rem; }
}

/* ============================================================
   6. USLUGE
   ============================================================ */

.sec-calm-services .svcs {
  background: linear-gradient(180deg, #ffffff 0%, var(--c-bg-alt) 26%, var(--c-bg-alt) 100%);
}
.sec-calm-services .svcs__blob {
  background: radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 70%);
  opacity: 0.9;
}

.sec-calm-services .u-eyebrow {
  color: var(--accent-strong);
  letter-spacing: 0.14em;
  font-weight: 700;
}
.sec-calm-services .svcs__intro {
  color: var(--c-text-muted);
  border-color: var(--accent);
}

.sec-calm-services .svc {
  border-radius: var(--r-xl);
  border-color: var(--c-border);
  box-shadow: var(--sh-xs);
}
.sec-calm-services .svc:hover { box-shadow: var(--sh-lg); border-color: var(--accent); }
.sec-calm-services .svc__icon { background: var(--accent-soft); color: var(--accent-strong); }
.sec-calm-services .svc:hover .svc__icon { background: var(--accent); color: #fff; }
.sec-calm-services .svc h3 { font-weight: 700; }
.sec-calm-services .svc p { color: var(--c-text-muted); }
.sec-calm-services .svc__link { color: var(--accent-strong); font-weight: 700; }
.sec-calm-services .svc__link i { background: var(--accent-soft); }

.sec-calm-services .svc--accent {
  background: linear-gradient(150deg, var(--accent-strong) 0%, var(--c-ink) 100%);
}
.sec-calm-services .svc--accent .svc__icon { background: rgba(255, 255, 255, 0.16); color: #fff; }
.sec-calm-services .svc--accent:hover .svc__icon { background: #fff; color: var(--accent-strong); }
.sec-calm-services .svc--accent p { color: rgba(255, 255, 255, 0.86); }
/* Svjetlije od --accent-lite: link sjedi na svjetlijem kraju gradijenta. */
.sec-calm-services .svc--accent .svc__link { color: #A8CDF5; }
.sec-calm-services .svc--accent .svc__link i,
.sec-calm-services .svc--accent:hover .svc__link i { background: rgba(255, 255, 255, 0.18); }

/* Mrlja koja prati kursor bila je u boji prethodnog templata. */
.sec-calm-services .svc::before {
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(17, 96, 180, 0.10), transparent 62%);
}
.sec-calm-services .svc--accent::before {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(127, 182, 238, 0.20), transparent 62%);
}
.sec-calm-services .svc::after { background: var(--accent-soft); }

/* ============================================================
   7. RECENZIJE
   ============================================================ */

.sec-atelier-referenzen .revs { background: var(--c-bg); }

.sec-atelier-referenzen .revs__strip { border-color: var(--c-line); }
.sec-atelier-referenzen .revs__stat { border-right-color: var(--c-line); color: var(--c-text-muted); }
.sec-atelier-referenzen .revs__stat strong { font-weight: 800; color: var(--c-ink); font-size: 1.45rem; }
.sec-atelier-referenzen .revs__stars { color: var(--c-star); letter-spacing: 1px; }
.sec-atelier-referenzen .revs__link { color: var(--accent-strong); font-weight: 700; }
.sec-atelier-referenzen .revs__link:hover { border-bottom-color: var(--accent-strong); }

.sec-atelier-referenzen .u-marker { color: var(--accent-strong); letter-spacing: 0.14em; font-weight: 700; }

.sec-atelier-referenzen .quote__mark { color: var(--accent); opacity: 0.5; }
.sec-atelier-referenzen .quote__text {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.5vw + 0.86rem, 1.75rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.sec-atelier-referenzen .quote__by strong { font-weight: 700; color: var(--c-ink); }
.sec-atelier-referenzen .quote__by span { color: var(--c-text-muted); }
.sec-atelier-referenzen .quote__by { border-top-color: var(--c-line); }

.sec-atelier-referenzen .quote__nav { border-color: var(--c-line-strong); color: var(--c-ink); }
.sec-atelier-referenzen .quote__nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.sec-atelier-referenzen .quote__tab { background: var(--c-surface); color: var(--accent-strong); font-weight: 700; }
.sec-atelier-referenzen .quote__tab.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 1px var(--accent) inset, 0 0 0 4px var(--accent-soft);
}

/* Fotografije uz recenzije su ilustracije iz materijala, ne
   portreti pacijenata koji su recenziju napisali — potpis to
   kaže, da slika ne bude tvrdnja o čovjeku. */
.sec-atelier-referenzen .quote__img { border-radius: var(--r-img); box-shadow: var(--sh-sm); }
.sec-atelier-referenzen .quote__img figcaption {
  margin-top: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.sec-atelier-referenzen .revs__note {
  margin-top: 18px;
  max-width: 62ch;
  font-size: 0.92rem;
  color: var(--c-text-muted);
}

/* Panel je `grid-area: 1/1` preko svih ostalih, pa najduža
   recenzija određuje potrebnu visinu — ispod nje se tekst
   prelije preko potpisa. */
.sec-atelier-referenzen .quote__stage { min-height: 400px; }

@media (max-width: 780px) {
  /* Ispod 780 px sekcija prelazi na `grid-template-columns: 56px 56px`
     uz `justify-content: start` — obje su zaključane, a pozornica
     citata je time široka 112 px i tekst se slomi u toranj od jedne
     riječi. Kontejner-upit daje tačnu širinu roditelja, pa se širina
     vraća bez diranja mreže i bez `100vw` (koji uračuna traku za skrol). */
  .sec-atelier-referenzen .quote { container-type: inline-size; }
  .sec-atelier-referenzen .quote__stage,
  .sec-atelier-referenzen .quote__tabs { width: 100cqw; max-width: 100cqw; }
  .sec-atelier-referenzen .quote__stage { min-height: 340px; }
}
@media (max-width: 480px) {
  .sec-atelier-referenzen .quote__stage { min-height: 420px; }
}

/* ============================================================
   8. PARALAKSA
   ============================================================ */

.sec-bloom-parallax .stage { background: var(--c-ink); border-radius: var(--r-2xl); }

/* Prvi sloj je LOGOTIP — kvadratna slika 750×754 na crnom.
   Razvučena preko cijelog okvira (`object-fit: cover`) bila bi
   mutan isječak zuba; `contain` je ostavlja cijelu, kao znak na
   tamnoj podlozi. */
/* Izvorni logotip je plavi zub na CRNOJ podlozi. `contain` ga ostavi
   cijelog, a crna podloga sloja sakrije rub te kvadratne slike — inače
   se vidi kao tamniji pravougaonik usred sekcije. */
.sec-bloom-parallax .stage__layer--logo { background: #000; }
.sec-bloom-parallax .stage__layer--logo img {
  object-fit: contain;
  object-position: 50% 44%;
  /* Procenti, ne `vh`: sloj je `position: sticky` i visok jedan ekran,
     pa `vh` mjeri nešto drugo nego sam okvir. */
  padding: 10% 8%;
  opacity: 0.95;
}

/* Veo je bio šljiva iz templata — hardkodiran, ne token. */
.sec-bloom-parallax .stage__veil {
  background: linear-gradient(105deg, rgba(9, 25, 50, 0.90) 0%, rgba(9, 25, 50, 0.72) 46%, rgba(9, 25, 50, 0.40) 100%);
}
.sec-bloom-parallax .stage__dots { --dot-c: rgba(234, 241, 250, 0.12); }

/* Isti problem kao u heroju: uspravna fotografija (720x960) preko
   ekrana široke pozornice daje isječak iz sredine, a doktorovo lice je
   na 9–20 % visine — ostajalo je iznad kadra. Kadar se zakači za vrh. */
.sec-bloom-parallax .stage__layer--tim img { object-position: 46% 4%; }

/* Veo je bio toliko gust da se ni ono što uđe u kadar nije razaznavalo.
   Olabavljen taman koliko tekst traži: bijeli naslov na 0,88 pada na
   preko 13:1, a fotografija ostaje fotografija. */

.sec-bloom-parallax .pan__n {
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.sec-bloom-parallax .pan h3 { color: #fff; font-weight: 700; max-width: 20ch; }
.sec-bloom-parallax .pan p { color: rgba(234, 241, 250, 0.86); }

@media (max-width: 760px) {
  .sec-bloom-parallax .stage__layer--logo img { padding: 22% 12%; }
  .sec-bloom-parallax .pan__n { font-size: 1.25rem; padding-inline: 14px; }
  .sec-bloom-parallax .pan h3 { font-size: 1.65rem; }
}

/* ============================================================
   9. O ORDINACIJI
   ============================================================ */

.sec-atelier-about { --c-bg: #F3F7FC; }
.sec-atelier-about .abt { background: var(--c-bg); }
.sec-atelier-about .u-marker { color: var(--accent-strong); letter-spacing: 0.14em; font-weight: 700; }
.sec-atelier-about .abt__head p { color: var(--c-text-muted); }
.sec-atelier-about .abt__figure figcaption { color: var(--c-text-muted); letter-spacing: 0.12em; }
.sec-atelier-about .abt__frame { border-radius: var(--r-xl); box-shadow: var(--sh-md); }
.sec-atelier-about .abt__strip :is(img, video) { border-radius: var(--r-img); }
.sec-atelier-about .abt__strip figcaption { color: var(--c-text-muted); }
.sec-atelier-about .abt__values { border-top-color: var(--c-line); }
.sec-atelier-about .abt__values li::before { background: var(--accent); opacity: 0.8; width: 2px; }
.sec-atelier-about .abt__v-no { color: var(--accent-strong); letter-spacing: 0.1em; }
.sec-atelier-about .abt__values h3 { font-weight: 700; }
.sec-atelier-about .abt__values p { color: var(--c-text-muted); }

/* Fotografija ordinacije je 4:3; kvadratni okvir na uskom
   ekranu bi joj odsjekao i stolicu i čovjeka. */
@media (max-width: 560px) {
  .sec-atelier-about .abt__frame { aspect-ratio: 4 / 3; }
}

/* ============================================================
   10. PRIJE I POSLIJE
   ============================================================ */

.sec-meridian-results .u-label { color: var(--accent-strong); letter-spacing: 0.14em; font-weight: 700; }
.sec-meridian-results .res__head p { color: var(--c-text-muted); }

.sec-meridian-results .case {
  border-radius: var(--r-2xl);
  border-color: var(--c-line);
  box-shadow: var(--sh-sm);
}

/* Obje fotografije su široke ~16:10; kvadratniji okvir bi im
   odsjekao zube sa strane. */
.sec-meridian-results .cmp { aspect-ratio: 16 / 10; border-radius: var(--r-lg); }
.sec-meridian-results .cmp__grip { color: var(--accent-strong); box-shadow: var(--sh-md); }
.sec-meridian-results .cmp__tag { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.sec-meridian-results .cmp__tag--b { background: rgba(255, 255, 255, 0.94); color: var(--c-ink); }
.sec-meridian-results .cmp__tag--a { background: var(--accent); color: #fff; }
.sec-meridian-results .case__body h3 { font-weight: 700; }
.sec-meridian-results .case__body > p { color: var(--c-text-muted); }

/* ============================================================
   11. PITANJA
   ============================================================ */

.sec-housecall-faq .u-label { color: var(--accent-strong); letter-spacing: 0.14em; font-weight: 700; }
.sec-housecall-faq .faq__list { border-top-color: var(--c-line); }
.sec-housecall-faq .qa { border-bottom-color: var(--c-line); }
.sec-housecall-faq .qa__t { font-weight: 700; color: var(--c-ink); }
.sec-housecall-faq .qa__q button:hover .qa__t { color: var(--accent-strong); }
.sec-housecall-faq .qa__sign::before,
.sec-housecall-faq .qa__sign::after { background: var(--accent); }
.sec-housecall-faq .qa__in p { color: var(--c-text-muted); }
.sec-housecall-faq .faq__more { color: var(--c-text-muted); }
.sec-housecall-faq .faq__more a { color: var(--accent-strong); font-weight: 600; }

/* Sklopljen odgovor je klipovan, ali ostaje u redu za fokus i u
   stablu pristupačnosti. `visibility` ga vadi iz oba; prelaz je
   odgođen da se ne ugasi prije nego se sklapanje odigra. */
.sec-housecall-faq .qa__panel {
  visibility: hidden;
  transition: grid-template-rows var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.sec-housecall-faq .qa.is-open .qa__panel {
  visibility: visible;
  transition: grid-template-rows var(--t-base) var(--ease), visibility 0s;
}

/* ============================================================
   12. KONTAKT
   ============================================================ */

.sec-sonnenschein-cta {
  --c-coral: var(--accent);
  --c-coral-dk: var(--accent-strong);
  --c-coral-soft: #EDF3FC;
  --c-sun: var(--accent-lite);
  --c-sun-soft: var(--accent-soft);
  --c-mint: var(--accent-lite);
  --c-mint-soft: var(--accent-soft);
  --c-accent-vivid: var(--accent);
}

.sec-sonnenschein-cta .cta {
  background:
    radial-gradient(70% 60% at 12% 18%, var(--accent-soft) 0%, transparent 62%),
    radial-gradient(70% 60% at 88% 86%, #EDF3FC 0%, transparent 64%),
    #ffffff;
  padding-block: clamp(80px, 10vw, 140px);
}
.sec-sonnenschein-cta .cta__head p { color: var(--c-text-muted); }
.sec-sonnenschein-cta .cta__head h2 .u-mark { --mark: var(--accent-soft); }

.sec-sonnenschein-cta .ccard {
  background: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-md);
}
.sec-sonnenschein-cta .ccard:hover { box-shadow: var(--sh-xl); }
.sec-sonnenschein-cta .ccard h3 { font-weight: 700; color: var(--c-ink); }
.sec-sonnenschein-cta .ccard p { color: var(--c-text-muted); }
.sec-sonnenschein-cta .ccard--wa .ccard__ic { background: #DCF2EC; color: var(--c-whatsapp-dk); }
.sec-sonnenschein-cta .ccard--tel .ccard__ic { background: var(--accent-soft); color: var(--accent-strong); }
.sec-sonnenschein-cta .ccard__go { font-weight: 700; color: var(--accent-strong); }
.sec-sonnenschein-cta .ccard--wa .ccard__go { color: var(--c-whatsapp-dk); }
.sec-sonnenschein-cta .ccard__go i { background: var(--accent-soft); box-shadow: none; }

/* Talas na dnu spaja sekciju sa podnožjem, koje je tamno. */
.sec-sonnenschein-cta .u-wave--bottom path { fill: var(--c-ink); }
.sec-sonnenschein-cta .u-wave--top path { fill: var(--c-bg-alt); }

/* ============================================================
   13. PODNOŽJE

   Pojednostavljeno kako UPUTA traži: bez pravnih stranica (nema
   ih), bez ponovljenog telefona (stoji u sekciji iznad), i sa
   adresom koja vodi na Google Mape. Ostaje ko smo, gdje smo i
   kako da nas dobijete.

   Sekcija se sama farba u `var(--c-bg)`, van token-bloka — zato
   tamno podnožje traži da `--c-bg` bude boja platna, inače ispod
   ostane bijela ploha.
   ============================================================ */

.sec-aperta-footer {
  --c-bg: #0C2140;
  --c-bg-alt: #0C2140;
  --c-white: #0C2140;
  --c-surface: #12294C;
  --c-ink: #ffffff;
  --c-text: #EAF1FA;
  --c-text-muted: rgba(234, 241, 250, 0.76);
  --c-line: rgba(234, 241, 250, 0.16);
  --c-line-strong: rgba(234, 241, 250, 0.32);
  --c-primary: var(--accent-lite);
  --c-primary-dk: #C3DBF8;
  --c-accent: var(--accent-lite);
}

.sec-aperta-footer .ftr { background: var(--c-bg); border-top: 0; }
.sec-aperta-footer .ftr__div { opacity: 0.4; }
.sec-aperta-footer .ftr__mark { width: 34px; height: 34px; display: grid; place-items: center; }
.sec-aperta-footer .ftr__mark img { width: auto; height: 34px; display: block; }
.sec-aperta-footer .ftr__logo-tx strong { color: #fff; font-weight: 800; font-size: 1.2rem; }
.sec-aperta-footer .ftr__logo-tx small { color: var(--c-text-muted); letter-spacing: 0.11em; }
.sec-aperta-footer .ftr__blurb { color: var(--c-text-muted); }
.sec-aperta-footer .ftr__col h3 {
  color: var(--accent-lite);
  letter-spacing: 0.14em;
  font-weight: 700;
}

.sec-aperta-footer .ftr__map {
  display: block;
  color: var(--c-text);
  padding: 4px 0 2px;
}
.sec-aperta-footer .ftr__map address {
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #fff;
}
.sec-aperta-footer .ftr__map-go {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-lite);
  border-bottom: 1px solid rgba(127, 182, 238, 0.5);
}
.sec-aperta-footer .ftr__map:hover .ftr__map-go { color: #fff; border-bottom-color: #fff; }

.sec-aperta-footer .ftr__mail,
.sec-aperta-footer .ftr__fb {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  color: var(--c-text-muted);
}
.sec-aperta-footer .ftr__fb { border-bottom: 1px solid transparent; }
.sec-aperta-footer .ftr__mail:hover,
.sec-aperta-footer .ftr__fb:hover { color: #fff; }

.sec-aperta-footer .ftr__hours th { color: #fff; font-weight: 600; }
.sec-aperta-footer .ftr__hours td { color: var(--c-text-muted); }

.sec-aperta-footer .ftr__bar { border-top-color: var(--c-line); color: var(--c-text-muted); }
.sec-aperta-footer .ftr__top-btn { color: var(--accent-lite); font-weight: 700; }
.sec-aperta-footer .ftr__top-btn:hover { color: #fff; }

/* ============================================================
   14. TELEFON — ZAJEDNIČKO
   ============================================================ */

@media (max-width: 760px) {
  .sec .u-container { --gutter: 20px; }

  .sec-calm-services .svcs__intro { font-size: 1.02rem; }
  .sec-atelier-referenzen .revs__stat { font-size: 0.8rem; }
  .sec-atelier-referenzen .revs__stat strong { font-size: 1.2rem; }
  .sec-atelier-about .abt__head p { font-size: 1.02rem; }
  .sec-housecall-faq .qa__t { font-size: 1.05rem; }
  .sec-meridian-results .res__head p { font-size: 1rem; }
}

/* Ljepljiva traka (poziv + WhatsApp) stoji preko dna ekrana —
   podnožje mora imati prostora ispod da ga ne pokrije. */
@media (max-width: 900px) {
  .sec-aperta-footer .ftr { padding-bottom: calc(var(--sp-5, 32px) + 96px); }
}

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