/* ============================================================
   Stomatološka ordinacija „Dr Živković" — stil sajta
   Učitava se POSLIJE section.css-ova i brend.css-a i nadjačava ih.
   Raspored se ne dira: nijedno pravilo ovdje ne prepisuje
   display / grid-* / flex-direction / order / position /
   align-* / justify-* / text-align na sekcijskim klasama.
   (Jedini izuzetak je hero ispod 640 px, gdje UPUTA.md izričito
   traži da tekst siđe ispod fotografije — vidi §HERO / TELEFON.)

   Pismo: Poppins (naslovi i tekst) — traženo od klijenta; fajlovi
   su u sekcije/fonts/, bez CDN-a.
   Boja: brend ordinacije, po logotipu — topla crna + rđasto
   narandžasta; četiri vrijednosti stoje u sekcije/tokens.css.
   ============================================================ */

:root {
  /* Stvarna visina zaglavlja — sekcije po njoj računaju
     scroll-margin i gornji razmak heroja. */
  --header-h: 80px;

  --ink:        #211A17;
  --ink-soft:   #3D3430;
  --muted:      #6E625C;
  --paper:      #FFFDFC;
  --paper-tint: #F6F0EA;
  --card:       #FFFFFF;
  --placeholder:#EFE6DE;
  --on-dark:    #F8F2ED;
  --on-dark-mu: rgba(248, 242, 237, 0.76);
  --hair:       rgba(33, 26, 23, 0.10);
  --hair-strong:rgba(33, 26, 23, 0.20);
  --hair-dark:  rgba(248, 242, 237, 0.20);
  --gold:       #E0A02F;
  --wa:         #128C7E;
  --wa-dk:      #0E6F63;
}

@media (max-width: 760px) {
  :root { --header-h: 66px; }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-poppins);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Trake sastavljača ne boje ništa — svaka sekcija nosi svoju podlogu. */
.band { background: var(--paper); }
.band-even { background: var(--paper); }

/* ============================================================
   1. JEDAN PAR PISAMA I JEDNA PALETA NA CIJELOM SAJTU
   Sekcije i dalje čitaju svoje varijable — samo sada sve
   pokazuju na isto mjesto.
   ============================================================ */

.sec-nordlicht-header,
.sec-haven-hero,
.sec-fundament-services,
.sec-housecall-referenzen,
.sec-rowan-parallax,
.sec-housecall-about,
.sec-dental-house-results,
.sec-fundament-instagram,
.sec-fundament-faq,
.sec-haven-cta,
.sec-housecall-footer {
  /* --- pismo --- */
  --ff-display: var(--font-poppins);
  --ff-body: var(--font-poppins);

  /* --- neutrali (stupac „ostaje tebi" iz TOKENI.md) --- */
  --c-bg: var(--paper);
  --c-bg-alt: var(--paper-tint);
  --c-white: var(--card);
  --c-surface: var(--placeholder);
  --c-ink: var(--ink);
  --c-text: var(--ink-soft);
  --c-text-muted: var(--muted);
  --c-on-dark: var(--on-dark);
  --c-on-dark-mu: var(--on-dark-mu);
  --c-line: var(--hair);
  --c-line-strong: var(--hair-strong);
  --c-line-dark: var(--hair-dark);
  --c-star: var(--gold);
  --c-whatsapp: var(--wa);
  --c-whatsapp-dk: var(--wa-dk);

  /* --- zaobljenja --- */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-2xl: 36px;
  --r-gallery: 20px;
  --r-window: 20px;
  --r-shoulder: 22px;
  --r-panel: clamp(22px, 3vw, 36px);
  --r-pill: 999px;

  /* --- sjenke: tople, meke, bez sivila --- */
  --sh-xs: 0 1px 2px rgba(45, 30, 22, 0.06);
  --sh-sm: 0 2px 10px -2px rgba(45, 30, 22, 0.10);
  --sh-md: 0 12px 28px -12px rgba(45, 30, 22, 0.20);
  --sh-lg: 0 24px 50px -20px rgba(45, 30, 22, 0.26);
  --sh-xl: 0 40px 80px -30px rgba(45, 30, 22, 0.32);

  /* --- tipografska skala --- */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.0625rem, 0.45vw + 0.96rem, 1.1875rem);
  --fs-h4: clamp(1.125rem, 0.6vw + 0.98rem, 1.3125rem);
  --fs-h3: clamp(1.25rem, 1.1vw + 1rem, 1.625rem);
  --fs-h2: clamp(1.75rem, 3vw + 0.95rem, 2.75rem);
  --fs-h1: clamp(2.125rem, 4.6vw + 0.95rem, 3.875rem);

  --lh-tight: 1.12;
  --lh-snug: 1.22;
  --lh-body: 1.62;
  --ls-tight: -0.02em;
  --ls-label: 0.12em;
}

/* ---- Jedan kontejner na cijelom sajtu ----
   Sekcije dolaze sa tri različite širine (1120 / 1200 / 1240) i tri
   različita bočna razmaka, a „fundament" sekcije uz to drže 88 px
   praznog lijevo — rezervu za ukrasnu šipku koje u ovom rasporedu
   nema. Rezultat je da svaka sekcija počinje na drugom mjestu.
   Ovdje sve dobija istu širinu i isti razmak s obje strane. */
.sec-haven-hero .u-container,
.sec-fundament-services .u-container,
.sec-housecall-referenzen .u-container,
.sec-rowan-parallax .u-container,
.sec-housecall-about .u-container,
.sec-dental-house-results .u-container,
.sec-fundament-instagram .u-container,
.sec-fundament-faq .u-container,
.sec-haven-cta .u-container,
.sec-housecall-footer .u-container {
  max-width: 1240px;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* Naslovi: Poppins, teško, zbijeno. */
.sec-nordlicht-header h1, .sec-nordlicht-header h2, .sec-nordlicht-header h3,
.sec-haven-hero h1, .sec-haven-hero h2, .sec-haven-hero h3,
.sec-fundament-services h2, .sec-fundament-services h3,
.sec-housecall-referenzen h2, .sec-housecall-referenzen h3,
.sec-rowan-parallax h2, .sec-rowan-parallax h3,
.sec-housecall-about h2, .sec-housecall-about h3,
.sec-dental-house-results h2, .sec-dental-house-results h3,
.sec-fundament-instagram h2, .sec-fundament-instagram h3,
.sec-fundament-faq h2, .sec-fundament-faq h3,
.sec-haven-cta h2, .sec-haven-cta h3,
.sec-housecall-footer h3 {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--ink);
}

/* Nadnaslovi („Usluge", „Recenzije") — jedan oblik svuda. */
.sec-fundament-services .u-label,
.sec-housecall-referenzen .u-label,
.sec-rowan-parallax .u-label,
.sec-housecall-about .u-label,
.sec-dental-house-results .u-label,
.sec-fundament-instagram .u-label,
.sec-fundament-faq .u-label,
.sec-haven-cta .u-label {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--ff-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sec-rowan-parallax .u-dark .u-label,
.sec-haven-cta .u-dark .u-label {
  background: rgba(248, 242, 237, 0.14);
  color: var(--on-dark);
}

/* Dugmad: jedna visina, jedno zaobljenje, jedan hover na cijelom sajtu. */
.sec-nordlicht-header .u-btn,
.sec-haven-hero .u-btn,
.sec-fundament-faq .u-btn,
.sec-haven-cta .u-btn {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.005em;
  border-radius: var(--r-pill);
  box-shadow: none;
}
.sec-nordlicht-header .u-btn:hover,
.sec-haven-hero .u-btn:hover,
.sec-fundament-faq .u-btn:hover,
.sec-haven-cta .u-btn:hover { transform: translateY(-2px); }

/* Narandžasta nosi BIJEL tekst — tamni tekst na njoj pada ispod AA. */
.sec-nordlicht-header .u-btn--accent { --btn-bg: var(--accent); --btn-fg: #fff; }
.sec-nordlicht-header .u-btn--accent:hover { --btn-bg: var(--accent-strong); }

/* ============================================================
   2. ZAGLAVLJE
   ============================================================ */

.sec-nordlicht-header {
  --c-canvas: var(--ink);
  --c-canvas-lt: #33272200;
  --c-canvas-dp: #150F0D;
  --c-panel: var(--paper);
  --c-panel-alt: var(--paper-tint);
  --c-on-canvas: var(--on-dark);
  --c-on-canvas-mu: rgba(248, 242, 237, 0.72);
  --c-line-canvas: rgba(248, 242, 237, 0.22);
  --header-h: 80px;
}
@media (max-width: 760px) { .sec-nordlicht-header { --header-h: 66px; } }

.sec-nordlicht-header .site-head.is-stuck {
  background: rgba(26, 20, 18, 0.9);
  box-shadow: 0 1px 0 rgba(248, 242, 237, 0.1), 0 12px 30px -18px rgba(26, 20, 18, 0.9);
}

.sec-nordlicht-header .brand__mark { width: 34px; height: 34px; color: var(--accent); }
.sec-nordlicht-header .brand__text strong {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.sec-nordlicht-header .brand__text small {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(248, 242, 237, 0.66);
}

/* Stavke menija stoje u jednom redu — dvorječna stavka je inače
   lomila red i pravila stavku dvostruko višu od ostalih. */
.sec-nordlicht-header .site-nav a {
  padding-inline: 13px;
  font-family: var(--ff-display);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  color: rgba(248, 242, 237, 0.8);
}
.sec-nordlicht-header .gmenu__grid a { white-space: nowrap; }
.sec-nordlicht-header .site-nav a:hover { background: rgba(248, 242, 237, 0.12); color: #fff; }

.sec-nordlicht-header .head-tel {
  font-family: var(--ff-display);
  font-weight: 700;
  border-color: rgba(248, 242, 237, 0.24);
}
.sec-nordlicht-header .head-tel svg { color: var(--accent); }

.sec-nordlicht-header .burger { border-color: rgba(248, 242, 237, 0.26); }

/* Meni preko cijelog ekrana */
.sec-nordlicht-header .gmenu__sheet { background: var(--ink); }
.sec-nordlicht-header .gmenu__grid a {
  border-color: rgba(248, 242, 237, 0.16);
  background: rgba(248, 242, 237, 0.05);
  border-radius: var(--r-md);
}
.sec-nordlicht-header .gmenu__grid span { color: var(--accent); letter-spacing: 0.14em; }
.sec-nordlicht-header .gmenu__tel { font-size: 1.625rem; }
.sec-nordlicht-header .gmenu__hours { color: rgba(248, 242, 237, 0.66); font-size: 0.875rem; }

/* Donja traka na telefonu */
.sec-nordlicht-header .mobile-bar {
  background: rgba(26, 20, 18, 0.95);
  border-color: rgba(248, 242, 237, 0.16);
  box-shadow: 0 18px 40px -18px rgba(26, 20, 18, 0.9);
}
.sec-nordlicht-header .mobile-bar__i { font-size: 0.6875rem; font-weight: 800; }
.sec-nordlicht-header .mobile-bar__i--wa { color: #4FD1A5; }
.sec-nordlicht-header .mobile-bar__i--cta {
  background: var(--accent);
  color: #fff;
  font-size: 0.9375rem;
}

/* Sekcija zaglavlja nema sadržaja u toku — 84 px pri dnu je
   rezerva za traku koja stoji na DNU stranice, pa bi ovdje samo
   napravila svijetlu prugu iznad heroja. */
@media (max-width: 620px) {
  .sec-nordlicht-header { padding-bottom: 0; }
}

/* ============================================================
   3. HERO
   ============================================================ */

.sec-haven-hero .hero { background: var(--ink); }

.sec-haven-hero .hero__media :is(img, video) { object-position: 58% 30%; }

.sec-haven-hero .hero__scrim {
  background:
    linear-gradient(to top, rgba(22, 16, 14, 0.92) 0%, rgba(22, 16, 14, 0.74) 28%, rgba(22, 16, 14, 0.26) 62%, rgba(22, 16, 14, 0.06) 100%),
    linear-gradient(to bottom, rgba(22, 16, 14, 0.5) 0%, transparent 24%);
}

.sec-haven-hero .hero__eyebrow {
  padding: 0.32rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgba(248, 242, 237, 0.14);
  color: var(--on-dark);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.sec-haven-hero .hero h1 {
  max-width: 17ch;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-shadow: 0 2px 30px rgba(22, 16, 14, 0.4);
}

.sec-haven-hero .hero__lead {
  max-width: 44ch;
  color: rgba(248, 242, 237, 0.9);
  line-height: 1.55;
}

.sec-haven-hero .hero__act { gap: 12px; padding-top: 0.75rem; }
.sec-haven-hero .u-btn--white { --btn-bg: #fff; --btn-fg: var(--ink); }
.sec-haven-hero .u-btn--white:hover { --btn-bg: var(--accent-soft); }
.sec-haven-hero .u-btn--ghost {
  --btn-bg: rgba(248, 242, 237, 0.06);
  --btn-fg: var(--on-dark);
  --btn-bd: rgba(248, 242, 237, 0.32);
}
.sec-haven-hero .u-btn--ghost:hover { --btn-bg: rgba(248, 242, 237, 0.14); --btn-bd: rgba(248, 242, 237, 0.6); }

/* ---- HERO NA TELEFONU (UPUTA.md: tekst silazi ISPOD slike) ----
   Ispod 640 px hero se slaže u tri bloka: zaglavlje, fotografija,
   tekst na punoj podlozi. Zatamnjenja nema jer tekst nije preko
   slike. Iznad 640 px se ne dira ništa. */
@media (max-width: 640px) {
  .sec-haven-hero .hero {
    min-height: 0;
    gap: 1.125rem;
    padding-top: calc(var(--header-h) + 0.75rem);
    padding-bottom: 2.25rem;
  }
  /* jedino mjesto gdje pravilo dira geometriju sekcije */
  .sec-haven-hero .hero__media {
    position: static;
    margin-inline: 1rem;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: none;
  }
  .sec-haven-hero .hero__media :is(img, video) {
    height: auto;
    aspect-ratio: 3 / 2;   /* tačan omjer fotografije — ništa se ne siječe */
    object-position: center center;
    animation: none;
    transform: none !important;   /* ubija parallax iz section.js */
  }
  .sec-haven-hero .hero__scrim { background: none; }

  .sec-haven-hero .hero h1 { max-width: none; font-size: 2.125rem; line-height: 1.1; }
  .sec-haven-hero .hero__lead { font-size: 1rem; line-height: 1.5; }
  .sec-haven-hero .hero__copy > * + * { margin-top: 0.75rem; }

  /* jedno glavno dugme, drugo lakše */
  .sec-haven-hero .hero__act { gap: 8px; }
  .sec-haven-hero .hero__act .u-btn--white { min-height: 56px; font-size: 1.0625rem; }
  .sec-haven-hero .hero__tel {
    min-height: 46px;
    padding: 10px 20px;
    font-size: 0.9375rem;
    font-weight: 700;
    --btn-bg: transparent;
    --btn-bd: rgba(248, 242, 237, 0.28);
  }
}

/* ============================================================
   4. USLUGE
   ============================================================ */

.sec-fundament-services .svcs { background: var(--paper-tint); }

.sec-fundament-services .svcs__intro {
  color: var(--muted);
  border-left-color: var(--accent);
  border-left-width: 3px;
}
@media (max-width: 1000px) {
  .sec-fundament-services .svcs__intro { border-top-width: 3px; border-top-color: var(--accent); }
}

.sec-fundament-services .svc {
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: var(--r-lg);
  border-color: var(--hair);
  background: var(--card);
  box-shadow: var(--sh-xs);
}
.sec-fundament-services .svc:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: rgba(194, 84, 35, 0.35);
}

.sec-fundament-services .svc__ic {
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  border: 1px solid rgba(194, 84, 35, 0.28);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.sec-fundament-services .svc__ic svg { width: 25px; height: 25px; }
.sec-fundament-services .svc:hover .svc__ic {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.sec-fundament-services .svc h3 { line-height: 1.25; }
.sec-fundament-services .svc__body > p { margin-top: 8px; color: var(--muted); line-height: 1.6; }

.sec-fundament-services .svc--accent {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--sh-md);
}
.sec-fundament-services .svc--accent h3 { color: #fff; }
.sec-fundament-services .svc--accent .svc__body > p { color: var(--on-dark-mu); }
.sec-fundament-services .svc--accent .svc__ic {
  background: rgba(194, 84, 35, 0.2);
  border-color: rgba(248, 242, 237, 0.22);
  color: #F0A57B;
}
.sec-fundament-services .svc--accent:hover .svc__ic { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================
   5. RECENZIJE
   ============================================================ */

.sec-housecall-referenzen .revs { background: var(--paper); }
.sec-housecall-referenzen .revs__head p { color: var(--muted); }

.sec-housecall-referenzen .revs__score {
  gap: 8px 12px;
  padding: 0.6rem 1.1rem;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--sh-xs);
}
.sec-housecall-referenzen .revs__score strong { font-size: 1.125rem; font-weight: 800; }
.sec-housecall-referenzen .u-stars svg { color: var(--gold); width: 17px; height: 17px; }
.sec-housecall-referenzen .revs__score a { color: var(--accent-strong); font-weight: 600; }
.sec-housecall-referenzen .revs__score a:hover { color: var(--accent); }

.sec-housecall-referenzen .rev {
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r-lg);
  border-color: var(--hair);
  background: var(--card);
  box-shadow: var(--sh-xs);
}
.sec-housecall-referenzen .rev__tx {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-soft);
}
.sec-housecall-referenzen .rev__who { color: var(--muted); }
.sec-housecall-referenzen .rev__who strong { color: var(--ink); font-weight: 700; }

/* Treća kartica nije recenzija nego poziv da se ostavi — pa i
   izgleda drugačije, da se ne čita kao još jedno mišljenje. */
.sec-housecall-referenzen .rev--ask {
  background: var(--accent-soft);
  border-color: rgba(194, 84, 35, 0.24);
  box-shadow: none;
}
.sec-housecall-referenzen .rev--ask .rev__tx { color: var(--ink-soft); }
.sec-housecall-referenzen .rev--ask .rev__who { border-top-color: rgba(194, 84, 35, 0.24); }
.sec-housecall-referenzen .rev__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ff-display);
  font-weight: 800;
  color: var(--accent-strong);
  border-bottom: 2px solid currentColor;
}
.sec-housecall-referenzen .rev__link:hover { color: var(--accent); }

/* ============================================================
   6. PARALLAX
   ============================================================ */

.sec-rowan-parallax { --maxw: 1240px; }
.sec-rowan-parallax .stage { background: var(--paper); }

/* Okvir je sada samo mjera — bez podloge i bez sjenke. Ono što se
   vidi je fotografija; sve izvan nje je podloga stranice. Sjenka i
   zaobljenje sele na samu sliku, pa se ne crta pravougaonik oko
   nevidljivog okvira. */
.sec-rowan-parallax .stage__frame {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* Fotografija je iste širine kao tekstualni blok: okvir ostaje pun,
   slika se drži kontejnera. Apsolutno pozicioniran element sa
   `inset: 0` i `max-width` centrira se sam preko `margin-inline: auto`
   — nijedno zaključano svojstvo se ne dira. */
.sec-rowan-parallax .stage__media {
  max-width: var(--maxw);
  margin-inline: auto;
  border-radius: clamp(18px, 2vw, 28px);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.sec-rowan-parallax .stage__body { padding-inline: clamp(20px, 4vw, 48px); }

/* Lice je lijevo od sredine — kadar se pomjera da ne padne pod
   najgušći dio zatamnjenja. */
.sec-rowan-parallax .stage__media :is(img, video) { object-position: 58% 38%; }
/* Zatamnjenje samo pri dnu, ispod teksta — gornja polovina slike
   ostaje slika. */
.sec-rowan-parallax .stage__media::after {
  background:
    linear-gradient(180deg, rgba(26, 20, 18, 0.1) 0%, rgba(26, 20, 18, 0.5) 48%, rgba(26, 20, 18, 0.97) 100%),
    linear-gradient(90deg, rgba(26, 20, 18, 0.5) 0%, transparent 58%);
}

.sec-rowan-parallax .stage__copy h2 { color: #fff; max-width: 20ch; }
.sec-rowan-parallax .stage__copy p { color: var(--on-dark-mu); max-width: 56ch; }

.sec-rowan-parallax .stage__facts { border-top-color: rgba(248, 242, 237, 0.22); }
.sec-rowan-parallax .stage__facts dt { color: rgba(248, 242, 237, 0.7); font-size: 0.875rem; }
.sec-rowan-parallax .stage__facts dd { color: #fff; font-weight: 800; }

@media (max-width: 760px) {
  .sec-rowan-parallax .stage__media::after {
    background: linear-gradient(180deg, rgba(22, 16, 14, 0.34) 0%, rgba(22, 16, 14, 0.86) 62%, rgba(22, 16, 14, 0.94) 100%);
  }
  .sec-rowan-parallax .stage__facts dd { font-size: 1.75rem; }
  /* Na telefonu okvir ide od ivice do ivice — bez ovog uvlačenja
     zaobljeni uglovi slike padaju tačno na ivicu ekrana i ne vide se. */
  .sec-rowan-parallax .stage__media { max-width: calc(100% - 32px); }
  .sec-rowan-parallax .stage__body { padding-inline: 34px; }
}

/* ============================================================
   7. O ORDINACIJI
   ============================================================ */

.sec-housecall-about .abt { background: var(--paper); }
/* Naslov ide punom širinom stupca — bez preloma na 18 znakova. */
.sec-housecall-about .abt__copy h2 { max-width: none; }
.sec-housecall-about .abt__copy h2::after { background: var(--accent); width: 48px; height: 3px; border-radius: 2px; }
.sec-housecall-about .abt__copy p { color: var(--muted); line-height: 1.68; }
.sec-housecall-about .abt__copy p strong { color: var(--ink); font-weight: 700; }

.sec-housecall-about .abt__facts {
  border-radius: var(--r-lg);
  overflow: hidden;
  border-color: var(--hair);
  background: var(--hair);
}
.sec-housecall-about .abt__facts li { padding: 16px 18px; background: var(--card); }
.sec-housecall-about .abt__facts strong { font-size: 1.25rem; font-weight: 800; color: var(--accent-strong); }
.sec-housecall-about .abt__facts span { color: var(--muted); }

/* Fotografija je 3:2 — okvir se prilagođava njoj, ne obrnuto. */
.sec-housecall-about .abt__media :is(img, video) {
  aspect-ratio: 2000 / 1333;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  object-position: center 40%;
}

/* ============================================================
   8. PRIJE I POSLIJE
   ============================================================ */

.sec-dental-house-results .res { background: var(--paper-tint); }
.sec-dental-house-results .res__head p { color: var(--muted); max-width: 62ch; }

.sec-dental-house-results .ba__case { gap: 8px; }
.sec-dental-house-results .ba__case :is(img, video) {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-gallery);
  object-position: center 48%;
  box-shadow: var(--sh-xs);
}
/* prvi slučaj je kvadratna fotografija — kadar malo više gore */
.sec-dental-house-results .ba__case:first-child :is(img, video) { object-position: center 44%; }

.sec-dental-house-results .ba__tag {
  left: 12px; bottom: 12px;
  padding: 5px 13px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: rgba(255, 253, 252, 0.94);
  color: var(--ink);
}
.sec-dental-house-results .ba__tag--a { background: var(--accent-strong); color: #fff; }

.sec-dental-house-results .ba__meta { border-top-color: var(--hair-strong); padding-top: 0.9rem; }
.sec-dental-house-results .ba__meta strong { font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
.sec-dental-house-results .ba__meta span { color: var(--muted); }

/* ============================================================
   9. NAŠI RADOVI (Instagram)
   ============================================================ */

.sec-fundament-instagram .ig { background: var(--paper); }
.sec-fundament-instagram .ig__head .u-head p { color: var(--muted); }

.sec-fundament-instagram .ig__profile {
  border-radius: var(--r-pill);
  border-color: var(--hair);
  box-shadow: var(--sh-xs);
}
.sec-fundament-instagram .ig__profile:hover { border-color: rgba(194, 84, 35, 0.4); }
.sec-fundament-instagram .ig__profile-tx strong { font-weight: 800; color: var(--ink); }
.sec-fundament-instagram .ig__profile-tx small { color: var(--muted); }

/* Fotografije su 4:5 (Instagram) i nose PRIJE i POSLIJE jedno
   iznad drugog — kadar 9:16 bi odsjekao jedno od to dvoje. */
.sec-fundament-instagram .reel__link {
  aspect-ratio: 1080 / 1350;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.sec-fundament-instagram .reel__link:hover { box-shadow: var(--sh-lg); }
.sec-fundament-instagram .reel__link::after {
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(22, 16, 14, 0.86));
}
.sec-fundament-instagram .reel__meta { padding: 14px 16px 16px; }
.sec-fundament-instagram .reel__meta strong { font-weight: 800; font-size: var(--fs-base); }
.sec-fundament-instagram .reel__meta small { color: rgba(255, 255, 255, 0.8); }

/* ============================================================
   10. PITANJA
   ============================================================ */

.sec-fundament-faq .faq { background: var(--paper-tint); }
.sec-fundament-faq .faq__note { color: var(--muted); }

.sec-fundament-faq .faq__list { border-top-color: var(--hair-strong); }
.sec-fundament-faq .qa { border-bottom-color: var(--hair-strong); }
.sec-fundament-faq .qa__t { color: var(--ink); font-weight: 700; }
.sec-fundament-faq .qa__q button:hover .qa__t { color: var(--accent-strong); }

.sec-fundament-faq .qa__seal {
  border-color: var(--hair-strong);
  color: var(--muted);
  font-weight: 800;
}
.sec-fundament-faq .qa__q button[aria-expanded="true"] .qa__seal {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.sec-fundament-faq .qa__sign::before { border-color: var(--muted); }
.sec-fundament-faq .qa__in > p { color: var(--muted); line-height: 1.65; }
.sec-fundament-faq .qa__in > p a {
  color: var(--accent-strong);
  font-weight: 600;
  border-bottom: 1px solid rgba(152, 64, 26, 0.4);
}
.sec-fundament-faq .qa__in > p a:hover { color: var(--accent); }

.sec-fundament-faq .u-btn--line {
  --btn-bg: var(--card);
  --btn-fg: var(--ink);
  --btn-bd: var(--hair-strong);
}
.sec-fundament-faq .u-btn--line:hover { --btn-bd: var(--accent); --btn-fg: var(--accent-strong); }

/* ============================================================
   11. KONTAKT (CTA)
   ============================================================ */

/* Tamno narandžasta traka — bijeli tekst na najsvjetlijoj tački
   drži 5,9:1, na najtamnijoj 7,5:1. */
.sec-haven-cta .cta {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 60%),
    linear-gradient(155deg, #A8451A 0%, #8F3A14 48%, #6E2B0F 100%);
}
.sec-haven-cta .cta__copy h2 { color: #fff; }
.sec-haven-cta .cta__copy p { color: rgba(255, 250, 246, 0.88); }
.sec-haven-cta .u-dark .u-label { background: rgba(0, 0, 0, 0.22); color: #fff; }
.sec-haven-cta .cta__rings { --ring-c: rgba(255, 255, 255, 0.1); }

.sec-haven-cta .u-btn--wa { --btn-bg: var(--wa); --btn-fg: #fff; }
.sec-haven-cta .u-btn--wa:hover { --btn-bg: var(--wa-dk); }
.sec-haven-cta .u-btn--white { --btn-bg: #fff; --btn-fg: var(--ink); }
.sec-haven-cta .u-btn--white:hover { --btn-bg: var(--accent-soft); }

/* ============================================================
   12. PODNOŽJE — jednostavno: ko smo, gdje smo, kada radimo
   ============================================================ */

/* Podnožje na tamnosmeđoj podlozi. Sve boje teksta idu na svijetle
   — najsvjetlije je 12,5:1, najtamnije (prigušeno) 6,1:1. */
.sec-housecall-footer {
  --ftr-bg: #33241C;
  --ftr-fg: #F6EEE7;
  --ftr-mu: #C9B8AC;
  --ftr-line: rgba(246, 238, 231, 0.16);
  --ftr-link: #F0A57B;
}

.sec-housecall-footer .ftr {
  background: var(--ftr-bg);
  border-top: 0;
  color: var(--ftr-fg);
}
@media (min-width: 621px) {
  /* rezerva za lebdeću traku postoji samo na telefonu */
  .sec-housecall-footer .ftr { padding-bottom: var(--sp-6, 2rem); }
}

.sec-housecall-footer .ftr__mark { width: 30px; height: 30px; color: var(--ftr-link); }
.sec-housecall-footer .ftr__logo-tx strong { font-size: 1.1875rem; font-weight: 800; color: #fff; }
.sec-housecall-footer .ftr__logo-tx small { color: var(--ftr-mu); letter-spacing: 0.12em; }
.sec-housecall-footer .ftr__blurb { color: var(--ftr-mu); }

.sec-housecall-footer .ftr__col h3 {
  color: #fff;
  font-family: var(--ff-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.sec-housecall-footer .ftr__social { display: flex; gap: 1rem; margin-top: 0.75rem; }
.sec-housecall-footer .ftr__social a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ftr-link);
}
.sec-housecall-footer .ftr__social a:hover { color: #fff; }

.sec-housecall-footer .ftr__contact address { margin-top: 0; color: var(--ftr-mu); }
.sec-housecall-footer .ftr__map {
  display: inline-block;
  color: var(--ftr-fg);
  border-bottom: 1px solid var(--ftr-line);
}
.sec-housecall-footer .ftr__map:hover { color: var(--ftr-link); border-bottom-color: var(--ftr-link); }
.sec-housecall-footer .ftr__mail { margin-top: 0.5rem; color: var(--ftr-mu); }
.sec-housecall-footer .ftr__mail:hover { color: var(--ftr-link); }
.sec-housecall-footer .ftr__hint { color: var(--ftr-mu); }
.sec-housecall-footer .ftr__hint a { color: var(--ftr-fg); border-bottom: 1px solid var(--ftr-line); }
.sec-housecall-footer .ftr__hint a:hover { color: var(--ftr-link); }

.sec-housecall-footer .ftr__hours th { color: #fff; font-weight: 600; }
.sec-housecall-footer .ftr__hours td { color: var(--ftr-mu); }

.sec-housecall-footer .ftr__links a { color: var(--ftr-mu); }
.sec-housecall-footer .ftr__links a:hover { color: var(--ftr-link); }

.sec-housecall-footer .ftr__bar { border-top-color: var(--ftr-line); color: var(--ftr-mu); }
.sec-housecall-footer .ftr__top-btn { color: var(--ftr-link); font-weight: 700; }
.sec-housecall-footer .ftr__top-btn:hover { color: #fff; }

/* ============================================================
   13. VERTIKALNI RITAM NA TELEFONU
   Sekcije dolaze sa razmakom računatim za širok ekran (do 128 px
   gore i dolje). Na telefonu to znači da se pola ekrana potroši
   na prazno prije nego se vidi prvi red teksta — pa je ovdje
   svuda 40 px.

   Dva izuzetka, oba zato što bi doslovnih 40 px nešto pokvarilo:
   hero (gornji razmak mora propustiti fiksno zaglavlje, inače
   naslov ide ispod njega) i podnožje (donji razmak je rezerva za
   lebdeću traku, inače traka prekrije zadnji red).
   ============================================================ */

@media (max-width: 640px) {
  .sec-fundament-services .svcs,
  .sec-housecall-referenzen .revs,
  .sec-rowan-parallax .stage,
  .sec-housecall-about .abt,
  .sec-dental-house-results .res,
  .sec-fundament-instagram .ig,
  .sec-fundament-faq .faq,
  .sec-haven-cta .cta {
    padding-block: 40px;
  }

  .sec-housecall-footer .ftr {
    padding-block: 40px;
    padding-bottom: calc(40px + 80px);
  }
}

/* ============================================================
   14. GALERIJA „PRIJE I POSLIJE" — vlastiti prozor
   Nije sekcija: markup stoji izvan <main>, ništa se ne preslaguje.
   ============================================================ */

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

.lb__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 11, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms ease;
  cursor: pointer;
}
.lb.is-open .lb__scrim { opacity: 1; }

.lb__panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 200ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lb.is-open .lb__panel { opacity: 1; transform: none; }

.lb__fig { margin: 0; }
.lb__img {
  display: block;
  width: 100%;
  max-height: min(76vh, 780px);
  object-fit: contain;
  border-radius: 20px;
  background: #241A15;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}

.lb__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 14px;
  color: rgba(246, 238, 231, 0.82);
  font-size: 0.875rem;
  line-height: 1.45;
}
.lb__count { color: rgba(246, 238, 231, 0.55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb__count b { font-weight: 700; color: rgba(246, 238, 231, 0.9); }

.lb__nav,
.lb__close {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(246, 238, 231, 0.22);
  border-radius: 999px;
  background: rgba(26, 20, 18, 0.72);
  color: #F6EEE7;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lb__nav svg, .lb__close svg { width: 22px; height: 22px; }
.lb__nav:hover, .lb__close:hover { background: var(--accent); border-color: var(--accent); }
.lb__nav:active { transform: scale(0.95); }
.lb__nav:focus-visible, .lb__close:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.lb__nav--prev { left: -22px; top: calc(50% - 40px); }
.lb__nav--next { right: -22px; top: calc(50% - 40px); }
.lb__close { right: -14px; top: -14px; }

/* Zadnja fotografija: strelica vodi na Instagram, pa i izgleda tako. */
.lb__nav--next.is-out {
  background: var(--accent);
  border-color: var(--accent);
}
.lb__nav--next.is-out:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

@media (max-width: 640px) {
  .lb__panel { width: 100%; }
  .lb__nav--prev { left: 8px; }
  .lb__nav--next { right: 8px; }
  .lb__nav--prev, .lb__nav--next { top: auto; bottom: 64px; }
  .lb__close { right: 6px; top: 6px; background: rgba(26, 20, 18, 0.86); }
  .lb__img { max-height: 66vh; }
}

@media (prefers-reduced-motion: reduce) {
  .lb__scrim, .lb__panel { transition: none; }
}

/* ============================================================
   15. WHATSAPP — lebdeće dugme, na obje širine
   Nije sekcija: ne mijenja nijedan raspored.
   ============================================================ */

.wa-fab {
  position: fixed;
  right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px 13px 15px;
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  font-family: var(--font-poppins);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(18, 140, 126, 0.7);
  transition: background-color 160ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wa-fab svg { width: 22px; height: 22px; flex: none; }
.wa-fab:hover { background: var(--wa-dk); transform: translateY(-2px); }
.wa-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (min-width: 621px) {
  /* iznad 620 px donje trake nema, pa dugme ide uz samu ivicu */
  .wa-fab { right: 24px; bottom: 24px; }
}

@media print { .wa-fab { display: none; } }