/* =====================================================================
   Stomatološka ordinacija Cvijetinović — stil sajta.

   Učitava se POSLIJE svih `section.css` fajlova iz `sekcije/` i nadjačava
   ih. Sekcije dolaze iz biblioteke, svaka sa svojom paletom i svojim
   pismom; ovaj fajl
   ih dovodi u isti vid. Radi tako što PREPISUJE TOKENE svake sekcije
   (`--c-*`, `--ff-*`, `--r-*`, `--sh-*`, `--fs-*`), a ne njihovu geometriju:
   nigdje se ne dira `display`, `grid-template-*`, `flex-direction`, `order`,
   `position`, `top/right/bottom/left`, `align-*`, `justify-*` ni
   `text-align` na klasama sekcija — raspored ostaje onakav kakav je došao
   u paketu.

   Paleta je izmjerena iz logotipa firme:
     tamnoplava  #003162
     cijan       #50C3F5
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokeni sajta
   --------------------------------------------------------------------- */

:root {
  /* Boje firme. Izvedene nijanse se mijenjaju SAMO zajedno sa akcentom. */
  --primary: #003162;
  --primary-fg: #ffffff;
  --accent: #0c6194;
  --accent-fg: #ffffff;
  --accent-strong: #003162;
  --accent-soft: #e2f4fe;

  --brand-navy: #003162;
  --brand-navy-dk: #002145;
  --brand-cyan: #50c3f5;
  --brand-cyan-dk: #0c6194;
  --brand-cyan-soft: #e2f4fe;

  --site-bg: #f7fafc;
  --site-fg: #1b2a38;
  --site-head-h: 72px;
}

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

/* ---------------------------------------------------------------------
   2. Okvir stranice
   --------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* sidro nikad ne završi ispod ljepljivog zaglavlja */
  scroll-padding-top: calc(var(--site-head-h) + 18px);
  background: var(--site-bg);
}

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

body {
  margin: 0;
  padding: 0;
  background: var(--site-bg);
  color: var(--site-fg);
  font-family: 'Inter Var', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* `clip`, nikad `hidden`: klipuje dekorativne mrlje, a ne pravi
     scroll kontejner koji bi slomio ljepljivo zaglavlje. */
  overflow-x: clip;
}

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

.band { background: transparent; }

/* Ljepljivo zaglavlje.
   `.site-head` u sekciji je `position: sticky`, ali mu je roditelj sama
   sekcija — visoka koliko i traka, pa bi zaglavlje otklizalo poslije 70 px.
   Ljepljivost zato nosi traka sastavljača (`.band-head`), koja NIJE klasa
   sekcije: ona se lijepi unutar `<main>`, dakle kroz cijelu stranicu. */
.band-head {
  position: sticky;
  top: 0;
  z-index: 90;
}

/* ---------------------------------------------------------------------
   3. Zajednički tokeni — svih devet sekcija u isti vid
   --------------------------------------------------------------------- */

.sec-aperta-header,
.sec-atelier-hero,
.sec-calm-services,
.sec-dental-house-about,
.sec-calm-referenzen,
.sec-fernhill-parallax,
.sec-calm-faq,
.sec-dental-house-cta,
.sec-haven-footer {
  /* ---------- podloge ---------- */
  --c-bg:            #f7fafc;
  --c-bg-alt:        #edf4fa;
  --c-white:         #ffffff;
  --c-surface:       #dcedf8;
  --c-surface-soft:  #f0f7fc;
  --c-surface-warm:  #edf4fa;

  /* ---------- tamnoplava iz logotipa ---------- */
  --c-primary:       #003162;
  --c-primary-dk:    #002145;
  --c-primary-lt:    #6e93b8;
  --c-primary-05:    rgba(0, 49, 98, 0.05);
  --c-primary-08:    rgba(0, 49, 98, 0.08);
  --c-primary-10:    rgba(0, 49, 98, 0.10);
  --c-primary-14:    rgba(0, 49, 98, 0.14);
  --c-primary-20:    rgba(0, 49, 98, 0.20);

  /* ---------- cijan iz logotipa ----------
     `--c-accent` je ispuna i znak, nikad podloga sitnom bijelom tekstu
     (bijelo na cijanu je 1,9:1). Za tekst na svijetlom ide `--c-accent-dk`
     (6,4:1), za tekst na cijanu tamnoplava (6,5:1). */
  --c-accent:        #50c3f5;
  --c-accent-dk:     #0c6194;
  --c-accent-lt:     #a9dff9;
  --c-accent-soft:   #e2f4fe;
  --c-accent-tint:   rgba(80, 195, 245, 0.22);

  /* Zlatna/„gold" iz Atelier templata čita istu cijan skalu. */
  --c-gold:          #50c3f5;
  --c-gold-dk:       #0c6194;
  --c-gold-soft:     #e2f4fe;

  /* ---------- tekst ---------- */
  --c-ink:           #0f2233;
  --c-ink-soft:      #1b2a38;
  --c-ink-70:        rgba(15, 34, 51, 0.70);
  --c-ink-12:        rgba(15, 34, 51, 0.12);
  --c-ink-06:        rgba(15, 34, 51, 0.06);
  --c-text:          #1b2a38;
  --c-text-muted:    #4c5c6b;
  --c-text-invert:   #ffffff;
  --c-on-dark:       #eaf4fb;
  --c-on-dark-mu:    rgba(234, 244, 251, 0.80);

  /* ---------- linije ---------- */
  --c-line:          rgba(0, 49, 98, 0.13);
  --c-line-strong:   rgba(0, 49, 98, 0.26);
  --c-line-dark:     rgba(234, 244, 251, 0.24);
  --c-line-invert:   rgba(234, 244, 251, 0.20);
  --c-border:        rgba(0, 49, 98, 0.13);
  --c-border-strong: rgba(0, 49, 98, 0.26);

  /* ---------- posebne ---------- */
  --c-whatsapp:      #0e7c6f;
  --c-whatsapp-dk:   #0b6357;
  --c-whatsapp-vivid:#25d366;
  --c-star:          #e0a21b;
  --c-google-blue:   #4285f4;

  /* ---------- jedno pismo kroz cijeli sajt ---------- */
  --ff-display: 'Inter Var', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-body:    'Inter Var', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --fs-h4:   clamp(1.1875rem, 0.6vw + 1.05rem, 1.375rem);
  --fs-h3:   clamp(1.375rem, 0.9vw + 1.15rem, 1.75rem);
  --fs-h2:   clamp(1.875rem, 2.1vw + 1.3rem, 2.75rem);
  --fs-h1:   clamp(2.375rem, 3.6vw + 1.35rem, 3.875rem);

  --lh-tight: 1.1;
  --lh-snug:  1.22;
  --lh-body:  1.65;
  --ls-tight: -0.022em;
  --ls-label:  0.14em;

  /* ---------- zaobljenja: jedna skala na cijelom sajtu ---------- */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-2xl: 32px;
  --r-pill: 999px;
  --r-circle: 50%;
  --r-gallery: 14px;
  --r-img: 14px;
  --r-window: 18px;
  --r-window-lg: 26px;

  /* ---------- sjenke: jedna skala, tonirane u tamnoplavo ---------- */
  --sh-xs: 0 1px 2px rgba(0, 33, 69, 0.06);
  --sh-sm: 0 2px 10px rgba(0, 33, 69, 0.07);
  --sh-md: 0 10px 28px -8px rgba(0, 33, 69, 0.16), 0 2px 6px rgba(0, 33, 69, 0.05);
  --sh-lg: 0 22px 50px -14px rgba(0, 33, 69, 0.22), 0 4px 12px rgba(0, 33, 69, 0.06);
  --sh-xl: 0 36px 80px -20px rgba(0, 33, 69, 0.28);
  --sh-focus: 0 0 0 3px var(--c-bg), 0 0 0 6px var(--c-accent);

  /* ---------- ritam: isti kontejner i isti razmak svuda ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 128px;
  --section-y: clamp(64px, 8vw, 112px);
  --gutter:    clamp(20px, 5vw, 44px);
  --maxw:      1180px;
  --maxw-narrow: 860px;

  --header-h: var(--site-head-h);

  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-fast: 150ms;
  --t-base: 260ms;
  --t-slow: 620ms;
}

/* ---------------------------------------------------------------------
   4. Tipografija — jedno pismo, jedan ritam naslova
   --------------------------------------------------------------------- */

.sec-aperta-header h1, .sec-atelier-hero h1, .sec-calm-services h1,
.sec-dental-house-about h1, .sec-calm-referenzen h1, .sec-fernhill-parallax h1,
.sec-calm-faq h1, .sec-dental-house-cta h1, .sec-haven-footer h1,
.sec-aperta-header h2, .sec-atelier-hero h2, .sec-calm-services h2,
.sec-dental-house-about h2, .sec-calm-referenzen h2, .sec-fernhill-parallax h2,
.sec-calm-faq h2, .sec-dental-house-cta h2, .sec-haven-footer h2 {
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}

.sec-aperta-header h3, .sec-atelier-hero h3, .sec-calm-services h3,
.sec-dental-house-about h3, .sec-calm-referenzen h3, .sec-fernhill-parallax h3,
.sec-calm-faq h3, .sec-dental-house-cta h3, .sec-haven-footer h3,
.sec-aperta-header h4, .sec-atelier-hero h4, .sec-calm-services h4,
.sec-dental-house-about h4, .sec-calm-referenzen h4, .sec-fernhill-parallax h4,
.sec-calm-faq h4, .sec-dental-house-cta h4, .sec-haven-footer h4 {
  font-weight: 650;
  letter-spacing: -0.014em;
}

/* Fokus: jedna boja i jedan oblik prstena na cijelom sajtu. */
.sec-aperta-header :focus-visible, .sec-atelier-hero :focus-visible,
.sec-calm-services :focus-visible, .sec-dental-house-about :focus-visible,
.sec-calm-referenzen :focus-visible, .sec-fernhill-parallax :focus-visible,
.sec-calm-faq :focus-visible, .sec-dental-house-cta :focus-visible,
.sec-haven-footer :focus-visible {
  outline: 3px solid var(--c-accent-dk);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---------------------------------------------------------------------
   5. Dugmad — jedan oblik na cijelom sajtu
   --------------------------------------------------------------------- */

.sec-aperta-header .u-btn, .sec-atelier-hero .u-btn, .sec-calm-services .u-btn,
.sec-dental-house-about .u-btn, .sec-calm-referenzen .u-btn,
.sec-fernhill-parallax .u-btn, .sec-calm-faq .u-btn,
.sec-dental-house-cta .u-btn, .sec-haven-footer .u-btn {
  min-height: 52px;
  padding: 14px 26px;
  border-width: 1px;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sec-aperta-header .u-btn--lg, .sec-atelier-hero .u-btn--lg,
.sec-calm-services .u-btn--lg, .sec-dental-house-about .u-btn--lg,
.sec-calm-referenzen .u-btn--lg, .sec-fernhill-parallax .u-btn--lg,
.sec-calm-faq .u-btn--lg, .sec-dental-house-cta .u-btn--lg,
.sec-haven-footer .u-btn--lg {
  min-height: 58px;
  padding: 17px 32px;
  font-size: var(--fs-lg);
}

/* ---------------------------------------------------------------------
   6. Sekcija 1 — zaglavlje
   --------------------------------------------------------------------- */

.sec-aperta-header .site-head {
  background: rgba(247, 250, 252, 0.92);
  border-bottom: 1px solid transparent;
  box-shadow: none;
}
.sec-aperta-header .site-head.is-stuck {
  border-bottom-color: var(--c-line);
  box-shadow: 0 6px 20px -14px rgba(0, 33, 69, 0.5);
}

/* Znak iz logotipa umjesto crteža iz templata. */
.sec-aperta-header .brand__mark {
  width: auto;
  height: 40px;
  aspect-ratio: 352 / 391;
}
.sec-aperta-header .brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sec-aperta-header .brand__tx strong {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-primary);
}
.sec-aperta-header .brand__tx small {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--c-accent-dk);
}

.sec-aperta-header .site-nav a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
  border-bottom-width: 2px;
}
.sec-aperta-header .site-nav a:hover,
.sec-aperta-header .site-nav a.is-current {
  color: var(--c-primary);
  border-bottom-color: var(--c-accent);
}

.sec-aperta-header .head-cta { min-height: 44px; padding: 10px 20px; font-size: var(--fs-sm); }
.sec-aperta-header .u-btn--solid { --btn-bg: var(--c-primary); --btn-fg: #fff; }
.sec-aperta-header .u-btn--solid:hover { --btn-bg: var(--c-primary-dk); }

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

.sec-aperta-header .menu { background: var(--c-white); border-top-color: var(--c-line); }
.sec-aperta-header .menu a { font-size: var(--fs-md); font-weight: 600; color: var(--c-primary); }
.sec-aperta-header .menu li:last-child a { color: var(--c-accent-dk); }

.sec-aperta-header .mobile-bar__i--call { background: var(--c-primary); }
.sec-aperta-header .mobile-bar__i { font-weight: 600; }

.sec-aperta-header .u-skip-link { background: var(--c-primary); color: #fff; }

/* ---------------------------------------------------------------------
   7. Sekcija 2 — hero
   --------------------------------------------------------------------- */

/* Zavjesa preko fotografije: tonirana u tamnoplavu firme umjesto u smeđu
   iz templata. Isti raspored zaustavnih tačaka, ista čitljivost. */
.sec-atelier-hero .hero__scrim {
  background:
    linear-gradient(180deg, rgba(0, 20, 41, 0.55) 0%, rgba(0, 20, 41, 0.12) 30%, rgba(0, 20, 41, 0.72) 74%, rgba(0, 20, 41, 0.93) 100%),
    linear-gradient(96deg, rgba(0, 20, 41, 0.80) 0%, rgba(0, 20, 41, 0.34) 46%, transparent 72%);
}

.sec-atelier-hero .hero { background: var(--c-primary-dk); }
.sec-atelier-hero .hero h1 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.sec-atelier-hero .hero h1 .u-em { color: var(--c-accent); }
.sec-atelier-hero .hero__label { color: var(--c-accent); font-weight: 700; }
.sec-atelier-hero .hero__lead { color: var(--c-on-dark-mu); }

.sec-atelier-hero .u-btn--ivory { --btn-bg: #ffffff; --btn-fg: var(--c-primary-dk); }
.sec-atelier-hero .u-btn--ivory:hover { --btn-bg: var(--c-accent-soft); }
.sec-atelier-hero .u-btn--solid:hover { --btn-bg: var(--c-primary-dk); }
.sec-atelier-hero .hero__ghost { --btn-bd: rgba(234, 244, 251, 0.46); --btn-fg: #ffffff; }
.sec-atelier-hero .hero__ghost:hover { --btn-bg: rgba(234, 244, 251, 0.14); --btn-bd: rgba(234, 244, 251, 0.76); }

.sec-atelier-hero .hero__meta { border-top-color: rgba(234, 244, 251, 0.24); }
.sec-atelier-hero .hero__meta li { border-right-color: rgba(234, 244, 251, 0.2); }
.sec-atelier-hero .hero__meta span { color: var(--c-accent); font-size: 0.64rem; }
.sec-atelier-hero .hero__meta strong { font-weight: 600; font-size: var(--fs-md); }

/* ---------------------------------------------------------------------
   8. Sekcija 3 — usluge
   --------------------------------------------------------------------- */

/* `clip` umjesto `hidden`: dekorativna mrlja se i dalje odsijeca, ali
   sekcija više ne pravi scroll kontejner. */
.sec-calm-services .svcs { overflow: clip; }
.sec-calm-services .svcs {
  background: linear-gradient(180deg, var(--c-white) 0%, var(--c-bg) 24%, var(--c-bg-alt) 100%);
}
.sec-calm-services .svcs__blob {
  background: radial-gradient(circle at 50% 50%, var(--c-accent-tint), transparent 70%);
  opacity: 0.9;
}
.sec-calm-services .u-eyebrow { color: var(--c-accent-dk); }
.sec-calm-services .svcs__intro { border-left-color: var(--c-accent); }

.sec-calm-services .svc { background: var(--c-white); border-radius: var(--r-xl); }
.sec-calm-services .svc__icon {
  border-radius: var(--r-lg);
  background: var(--c-accent-soft);
  color: var(--c-accent-dk);
}
.sec-calm-services .svc:hover .svc__icon {
  border-radius: var(--r-lg);
  transform: scale(1.05);
  background: var(--c-primary);
  color: #fff;
}
.sec-calm-services .svc__link { color: var(--c-accent-dk); font-weight: 600; }
.sec-calm-services .svc__link i { background: var(--c-accent-soft); }
.sec-calm-services .svc:hover .svc__link i { background: var(--c-accent); color: var(--c-primary-dk); }
.sec-calm-services .svc::after { background: var(--c-surface-soft); }
.sec-calm-services .svc::before {
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 49, 98, 0.08), transparent 62%);
}

.sec-calm-services .svc--accent {
  background: linear-gradient(150deg, var(--c-primary) 0%, var(--c-primary-dk) 100%);
}
.sec-calm-services .svc--accent .svc__icon { background: rgba(255, 255, 255, 0.14); color: var(--c-accent); }
.sec-calm-services .svc--accent:hover .svc__icon { background: var(--c-accent); color: var(--c-primary-dk); }
.sec-calm-services .svc--accent .svc__link { color: var(--c-accent); }
.sec-calm-services .svc--accent::before {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(80, 195, 245, 0.24), transparent 62%);
}
.sec-calm-services .svc:focus-within { border-color: var(--c-accent-dk); }

/* ---------------------------------------------------------------------
   9. Sekcija 4 — o ordinaciji
   --------------------------------------------------------------------- */

.sec-dental-house-about .about { background: var(--c-bg); }
.sec-dental-house-about .about__media { border-radius: var(--r-xl); background: var(--c-surface); }
/* Zatečena visina je fiksna (clamp), pa `object-fit: cover` odsijeca ljude
   sa krajeva grupne fotografije. Visina po slici — tim se vidi cijeli. */
.sec-dental-house-about .about__media :is(img, video) {
  height: auto;
  aspect-ratio: 1200 / 995;
  object-fit: contain;
}
.sec-dental-house-about .u-label { color: var(--c-accent-dk); }
.sec-dental-house-about .about__points svg {
  background: var(--c-accent-soft);
  color: var(--c-accent-dk);
}
.sec-dental-house-about .about__points strong { color: var(--c-primary); }
.sec-dental-house-about .about__note {
  border-left-color: var(--c-accent);
  background: var(--c-surface-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-3) var(--sp-4);
}

/* ---------------------------------------------------------------------
   10. Sekcija 5 — recenzije
   --------------------------------------------------------------------- */

.sec-calm-referenzen .revs { overflow: clip; background: var(--c-white); }
.sec-calm-referenzen .revs__blob {
  background: radial-gradient(circle at 50% 50%, var(--c-surface), transparent 70%);
}
.sec-calm-referenzen .u-eyebrow { color: var(--c-accent-dk); }

.sec-calm-referenzen .revsum {
  background: linear-gradient(150deg, var(--c-surface-soft), var(--c-white) 62%);
  border-radius: var(--r-xl);
}
.sec-calm-referenzen .revsum__num { color: var(--c-primary); font-weight: 700; }
.sec-calm-referenzen .revsum__stars { color: var(--c-star); }
.sec-calm-referenzen .revsum__meta strong { color: var(--c-primary); }
.sec-calm-referenzen .revsum__dist { border-inline-color: var(--c-border); }
.sec-calm-referenzen .revsum__trend svg { background: var(--c-accent-soft); color: var(--c-accent-dk); }
.sec-calm-referenzen .u-btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-primary); --btn-bd: var(--c-line-strong); }
.sec-calm-referenzen .u-btn--ghost:hover { --btn-bg: var(--c-accent-soft); --btn-bd: var(--c-accent-dk); }
.sec-calm-referenzen .revsum__write { color: var(--c-accent-dk); }
.sec-calm-referenzen .revsum__write:hover { text-decoration-color: var(--c-accent-dk); }

/* Radno vrijeme u srednjoj koloni — vlastite klase, vlastiti stil. */
.sec-calm-referenzen .ord-hours__t {
  margin: 0 0 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-dk);
}
.sec-calm-referenzen .ord-hours { display: grid; gap: 8px; }
.sec-calm-referenzen .ord-hours li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.sec-calm-referenzen .ord-hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.sec-calm-referenzen .ord-hours strong {
  font-weight: 600;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sec-calm-referenzen .ord-hours__adr {
  margin: 12px 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.sec-calm-referenzen .revcard { border-radius: var(--r-xl); }
.sec-calm-referenzen .revcard__id strong { color: var(--c-primary); font-weight: 650; }
.sec-calm-referenzen .revcard__text { color: var(--c-text-muted); }

/* ---------------------------------------------------------------------
   11. Sekcija 6 — traka preko fotografije
   --------------------------------------------------------------------- */

.sec-fernhill-parallax .stage { background: var(--c-primary-dk); }
.sec-fernhill-parallax .stage__scrim {
  background: linear-gradient(180deg, rgba(0, 33, 69, 0.88) 0%, rgba(0, 33, 69, 0.94) 100%);
}
.sec-fernhill-parallax .u-dark .u-label { color: var(--c-accent); }
.sec-fernhill-parallax .rail::after { background: var(--c-accent); }
.sec-fernhill-parallax .rail__dot { background: var(--c-primary-dk); border-color: rgba(234, 244, 251, 0.4); }
.sec-fernhill-parallax .rail__i.is-lit .rail__dot,
.sec-fernhill-parallax.has-js .rail__i.is-lit .rail__dot,
.sec-fernhill-parallax:not(.has-js) .rail__dot { background: var(--c-accent); border-color: var(--c-accent); }
.sec-fernhill-parallax .rail__t { color: var(--c-accent); font-weight: 700; letter-spacing: 0.04em; }
.sec-fernhill-parallax .rail__i p { color: var(--c-on-dark-mu); }

/* ---------------------------------------------------------------------
   12. Sekcija 7 — česta pitanja
   --------------------------------------------------------------------- */

/* `hidden` je ovdje pravio scroll kontejner i lomio ljepljivu bočnu
   kolonu; `clip` odsijeca mrlju bez te posljedice. */
.sec-calm-faq .faq { overflow: clip; }
.sec-calm-faq .faq { background: linear-gradient(180deg, var(--c-bg-alt) 0%, var(--c-bg) 100%); }
.sec-calm-faq .faq__blob {
  background: radial-gradient(circle at 50% 50%, var(--c-accent-tint), transparent 70%);
}
.sec-calm-faq .u-eyebrow { color: var(--c-accent-dk); }
.sec-calm-faq .faq__item { border-radius: var(--r-lg); background: var(--c-white); }
.sec-calm-faq .faq__q button { border-radius: var(--r-lg); color: var(--c-primary); font-weight: 650; }
.sec-calm-faq .faq__q button:hover { background: var(--c-surface-soft); }
.sec-calm-faq .faq__sign { background: var(--c-accent-soft); }
.sec-calm-faq .faq__sign::before, .sec-calm-faq .faq__sign::after { background: var(--c-accent-dk); }
.sec-calm-faq .faq__q button[aria-expanded="true"] .faq__sign { background: var(--c-primary); }
.sec-calm-faq .faq__item.is-open { border-color: var(--c-accent-dk); }

/* ---------------------------------------------------------------------
   13. Sekcija 8 — poziv na akciju
   --------------------------------------------------------------------- */

.sec-dental-house-cta .cta__band {
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 130% at 100% 0%, rgba(80, 195, 245, 0.30) 0%, transparent 62%),
    var(--c-primary-dk);
}
.sec-dental-house-cta .u-label { color: var(--c-accent); }
.sec-dental-house-cta .cta__status { color: var(--c-accent-soft); }
.sec-dental-house-cta .cta__dot { background: var(--c-accent); box-shadow: 0 0 0 4px rgba(80, 195, 245, 0.28); }
.sec-dental-house-cta .cta__status.is-closed .cta__dot {
  background: var(--c-primary-lt);
  box-shadow: 0 0 0 4px rgba(234, 244, 251, 0.14);
}
.sec-dental-house-cta .cta__acts { border-radius: var(--r-lg); background: rgba(234, 244, 251, 0.22); }
.sec-dental-house-cta .crow { background: var(--c-primary-dk); }
.sec-dental-house-cta .crow:hover { background: #0a3a68; }
/* Bijeli znak na cijanu je 1,9:1 — tamnoplavi je 6,5:1. */
.sec-dental-house-cta .crow__ic { background: var(--c-accent); color: var(--c-primary-dk); border-radius: var(--r-md); }
.sec-dental-house-cta .crow--wa .crow__ic { background: var(--c-whatsapp); color: #fff; }
.sec-dental-house-cta .crow__tx strong { font-weight: 700; }
.sec-dental-house-cta .cta__fine a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.sec-dental-house-cta .cta__fine a:hover { color: #fff; }

/* ---------------------------------------------------------------------
   14. Sekcija 9 — podnožje
   --------------------------------------------------------------------- */

.sec-haven-footer .ftr { background: var(--c-primary-dk); }
.sec-haven-footer .ftr__mark {
  width: 46px;
  height: 51px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: var(--r-md);
  padding: 5px;
}
.sec-haven-footer .ftr__mark img { width: 100%; height: 100%; object-fit: contain; }
.sec-haven-footer .ftr__logo-tx strong { font-weight: 700; }
.sec-haven-footer .ftr__logo-tx small { color: var(--c-accent); letter-spacing: 0.11em; font-weight: 600; }
.sec-haven-footer .ftr__col h3 { color: var(--c-accent); font-weight: 700; }
.sec-haven-footer .ftr__tel { font-weight: 700; }
/* e-pošta i WhatsApp svaki u svom redu i kad je kolona široka */
.sec-haven-footer .ftr__mail, .sec-haven-footer .ftr__wa { width: 100%; }
.sec-haven-footer .ftr__tel:hover, .sec-haven-footer .ftr__mail:hover, .sec-haven-footer .ftr__wa:hover { color: var(--c-accent); }
.sec-haven-footer .ord-tel2 { font-variant-numeric: tabular-nums; }
.sec-haven-footer .ftr__dir { color: var(--c-accent); font-weight: 650; }

/* Google karta u podnožju */
.sec-haven-footer .ord-map {
  display: block;
  width: 100%;
  height: 172px;
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-md);
  background: rgba(234, 244, 251, 0.08);
  color-scheme: light;
}
@media (max-width: 1000px) { .sec-haven-footer .ord-map { height: 200px; } }
.sec-haven-footer .ftr__social a { background: rgba(234, 244, 251, 0.12); }
.sec-haven-footer .ftr__social a:hover { background: rgba(234, 244, 251, 0.24); }
.sec-haven-footer .ftr__top-btn { background: rgba(234, 244, 251, 0.12); font-weight: 600; }
.sec-haven-footer .ftr__top-btn:hover { background: rgba(234, 244, 251, 0.24); }

/* ---------------------------------------------------------------------
   15. Telefon
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Traka „pozovi / WhatsApp" stoji preko dna — sekcije iznad podnožja
     dobijaju mjesta da im posljednji red ne završi ispod nje. */
  .sec-dental-house-cta .cta { padding-bottom: calc(var(--section-y) + 32px); }
}

@media (max-width: 620px) {
  .sec-atelier-hero .hero h1 { letter-spacing: -0.026em; }
  .sec-calm-referenzen .ord-hours li { font-size: var(--fs-xs); }

  /* Hero na telefonu: manje visine na dugmadima i uža traka sa tri
     podatka, da sva tri stanu u JEDAN red. Kad se prelomi u dva reda,
     drugi red ostane sam a razdjelnik iza njega visi u prazno. */
  .sec-atelier-hero .hero__lead { font-size: var(--fs-base); max-width: 34ch; }
  .sec-atelier-hero .hero__cta { gap: 10px; padding-top: var(--sp-2); }
  .sec-atelier-hero .hero__cta .u-btn--lg {
    min-height: 52px;
    padding: 15px 22px;
    font-size: var(--fs-md);
  }
  .sec-atelier-hero .hero__meta { padding-top: var(--sp-3); }
  .sec-atelier-hero .hero__meta li { padding-right: 12px; margin-right: 12px; }
  .sec-atelier-hero .hero__meta span { font-size: 0.58rem; letter-spacing: 0.08em; }
  .sec-atelier-hero .hero__meta strong { font-size: 0.9375rem; }
}

/* ---------------------------------------------------------------------
   Hero na telefonu (ispod 640 px). Iznad te širine se ništa ne mijenja.
   --------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* Sadržaj kreće odmah ispod zaglavlja.
     Visina se više ne razvlači na 92svh; bez slobodne visine
     `align-content: center` iz sekcije nema šta da centrira, pa grupa
     sjeda na vrh — a `padding-bottom` ostavlja čist pojas fotografije
     ispod trake sa tri podatka. */
  .sec-atelier-hero .hero {
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 78px;
  }

  /* Kadar: na uskom formatu `70%` je lice gurao pod naslov. Na `55%`
     lice ide u desnu trećinu — tamo gdje teksta nema — a u kadar ulazi
     i stomatolog u pozadini. */
  .sec-atelier-hero .hero__media :is(img, video) { object-position: 55% 50%; }

  /* Veo: gust lijevo, gdje stoji tekst; proziran desno, gdje je lice.
     Uspravni sloj samo podupire sitni tekst (lead, dugmad, traka) i
     pušta dno da se vidi. */
  .sec-atelier-hero .hero__scrim {
    background:
      linear-gradient(90deg,
        rgba(0, 20, 41, 0.88) 0%,
        rgba(0, 20, 41, 0.85) 44%,
        rgba(0, 20, 41, 0.58) 66%,
        rgba(0, 20, 41, 0.15) 85%,
        rgba(0, 20, 41, 0.04) 100%),
      linear-gradient(180deg,
        rgba(0, 20, 41, 0.36) 0%,
        rgba(0, 20, 41, 0.18) 26%,
        rgba(0, 20, 41, 0.34) 50%,
        rgba(0, 20, 41, 0.58) 72%,
        rgba(0, 20, 41, 0.58) 84%,
        rgba(0, 20, 41, 0.06) 100%);
  }

  /* Tekst se drži lijeve strane da ne ulazi u svijetli dio. */
  .sec-atelier-hero .hero__copy { max-width: 20rem; }

  /* Dugmad: par jednakih pilula — ista širina, visina, pismo i razmak.
     Razlikuju se samo težinom: prvo puno bijelo, drugo staklo sa
     obrubom. Uža su od kolone teksta, pa desno ostaje više fotografije. */
  .sec-atelier-hero .hero__cta { gap: 10px; padding-top: 4px; }
  .sec-atelier-hero .hero__cta .u-btn {
    max-width: 16.5rem;
    min-height: 46px;
    padding: 12px 22px;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
  }
  .sec-atelier-hero .hero__cta .u-btn--ivory {
    box-shadow: 0 10px 24px -12px rgba(0, 20, 41, 0.9);
  }
  .sec-atelier-hero .hero__ghost {
    --btn-bg: rgba(0, 20, 41, 0.5);
    --btn-bd: rgba(234, 244, 251, 0.5);
  }
  .sec-atelier-hero .hero__ghost:hover {
    --btn-bg: rgba(0, 20, 41, 0.68);
    --btn-bd: rgba(234, 244, 251, 0.78);
  }
}

/* Najuži telefoni (320 px): još malo stisnuti da traka ostane u jednom redu. */
@media (max-width: 360px) {
  .sec-atelier-hero .hero__meta li { padding-right: 9px; margin-right: 9px; }
  .sec-atelier-hero .hero__meta span { font-size: 0.54rem; letter-spacing: 0.06em; }
  .sec-atelier-hero .hero__meta strong { font-size: 0.875rem; }
}

/* Traka na telefonu prekriva dno podnožja — podnožje već ostavlja
   prostor; ovo je samo osiguranje kad se traka pojavi na užem ekranu. */
@media (max-width: 480px) {
  .sec-aperta-header .mobile-bar__i { font-size: var(--fs-sm); min-height: 52px; }
}

@media print {
  .band-head { position: static; }
}