/* ==========================================================================
   Family Dental — stil sajta.

   Učitava se POSLIJE `tokens.css`, svih `section.css` i `brend.css`, pa
   nadjačava tokene sekcija po redoslijedu. Raspored (grid, flex, position,
   poravnanja) se ovdje NE dira — samo boja, pismo, razmak, zaobljenje,
   sjenka, pozadina i kadar slike.

   1. Osnova stranice
   2. Zajednički tokeni za svih 11 sekcija
   3. Popravke po sekciji
   4. Telefon
   5. Štampa
   ========================================================================== */

/* ==========================================================================
   1. OSNOVA STRANICE
   ========================================================================== */

:root {
  /* --- neutrali --- */
  --fd-bg:            #fbfcfc;
  --fd-bg-alt:        #eff5f3;
  --fd-surface:       #e2efeb;
  --fd-surface-soft:  #f2f8f6;
  --fd-white:         #ffffff;
  --fd-ink:           #14262c;
  --fd-text:          #1a2b31;
  --fd-text-muted:    #55666c;
  --fd-line:          rgba(20, 38, 44, 0.12);
  --fd-line-strong:   rgba(20, 38, 44, 0.24);
  --fd-on-dark:       #e9f2f0;
  --fd-on-dark-mu:    rgba(233, 242, 240, 0.78);
  --fd-line-dark:     rgba(233, 242, 240, 0.20);

  /* Akcent na TAMNOJ podlozi. Brend-akcent je taman i na tamnom se gubi. */
  --fd-accent-lite:   #6fd0bd;

  --fd-star:          #dfa227;
  --fd-wa:            #128c7e;
  --fd-wa-dk:         #0e6f63;
  --fd-wa-vivid:      #25d366;
  --fd-google-blue:   #4285f4;

  /* --- zaobljenja --- */
  --fd-r-xs:  8px;
  --fd-r-sm:  12px;
  --fd-r-md:  16px;
  --fd-r-lg:  20px;
  --fd-r-xl:  26px;
  --fd-r-2xl: 32px;

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

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  background: var(--fd-bg);
}

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

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

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

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

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

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

.sec-housecall-header,
.sec-calm-hero,
.sec-anker-services,
.sec-anker-referenzen,
.sec-calm-parallax,
.sec-fernhill-about,
.sec-meridian-results,
.sec-fundament-instagram,
.sec-calm-faq,
.sec-calm-cta,
.sec-calm-footer {
  /* --- PISMO: Nunito za naslove (opšta/porodična praksa), Inter za tekst --- */
  --ff-display: var(--font-display-rounded);
  --ff-body:    var(--font-sans);

  /* --- boje --- */
  --c-bg:            var(--fd-bg);
  --c-bg-alt:        var(--fd-bg-alt);
  --c-surface:       var(--fd-surface);
  --c-surface-soft:  var(--fd-surface-soft);
  --c-white:         var(--fd-white);
  --c-ink:           var(--fd-ink);
  --c-text:          var(--fd-text);
  --c-text-muted:    var(--fd-text-muted);
  --c-text-invert:   var(--fd-white);
  --c-on-dark:       var(--fd-on-dark);
  --c-on-dark-mu:    var(--fd-on-dark-mu);
  --c-line:          var(--fd-line);
  --c-line-strong:   var(--fd-line-strong);
  --c-line-dark:     var(--fd-line-dark);
  --c-border:        var(--fd-line);
  --c-border-strong: var(--fd-line-strong);
  --c-accent-tint:   var(--accent-soft);
  --c-whatsapp:      var(--fd-wa);
  --c-whatsapp-dk:   var(--fd-wa-dk);
  --c-whatsapp-vivid: var(--fd-wa-vivid);
  --c-star:          var(--fd-star);
  --c-google-blue:   var(--fd-google-blue);

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

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

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

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

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

/* Nunito je zaobljeno pismo i na 600 djeluje mekano — naslovi idu na 700. */
.sec-housecall-header h1, .sec-housecall-header h2, .sec-housecall-header h3, .sec-housecall-header h4,
.sec-calm-hero h1, .sec-calm-hero h2, .sec-calm-hero h3, .sec-calm-hero h4,
.sec-anker-services h1, .sec-anker-services h2, .sec-anker-services h3, .sec-anker-services h4,
.sec-anker-referenzen h1, .sec-anker-referenzen h2, .sec-anker-referenzen h3, .sec-anker-referenzen h4,
.sec-calm-parallax h1, .sec-calm-parallax h2, .sec-calm-parallax h3, .sec-calm-parallax h4,
.sec-fernhill-about h1, .sec-fernhill-about h2, .sec-fernhill-about h3, .sec-fernhill-about h4,
.sec-meridian-results h1, .sec-meridian-results h2, .sec-meridian-results h3, .sec-meridian-results h4,
.sec-fundament-instagram h1, .sec-fundament-instagram h2, .sec-fundament-instagram h3, .sec-fundament-instagram h4,
.sec-calm-faq h1, .sec-calm-faq h2, .sec-calm-faq h3, .sec-calm-faq h4,
.sec-calm-cta h1, .sec-calm-cta h2, .sec-calm-cta h3, .sec-calm-cta h4,
.sec-calm-footer h1, .sec-calm-footer h2, .sec-calm-footer h3, .sec-calm-footer h4 {
  font-weight: 700;
  color: var(--primary);
}

/* Fokus: isti prsten na cijelom sajtu. */
.sec-housecall-header :focus-visible,
.sec-calm-hero :focus-visible,
.sec-anker-services :focus-visible,
.sec-anker-referenzen :focus-visible,
.sec-calm-parallax :focus-visible,
.sec-fernhill-about :focus-visible,
.sec-meridian-results :focus-visible,
.sec-fundament-instagram :focus-visible,
.sec-calm-faq :focus-visible,
.sec-calm-cta :focus-visible,
.sec-calm-footer :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--fd-r-xs);
}

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

/* --------------------------------------------------------------------------
   1 · Zaglavlje
   -------------------------------------------------------------------------- */

.sec-housecall-header .site-head {
  background: rgba(251, 252, 252, 0.94);
  border-bottom: 1px solid var(--c-line);
}
.sec-housecall-header .site-head__inner { gap: 18px; }

.sec-housecall-header .brand__mark {
  width: 38px;
  height: 38px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--fd-ink);
}
.sec-housecall-header .brand__mark img { width: 100%; height: 100%; object-fit: cover; }

.sec-housecall-header .brand__tx strong {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--primary);
}
.sec-housecall-header .brand__tx small {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--fd-text-muted);
}

/* Svaka stavka menija stoji u JEDNOM redu — „O nama“ i „Prije i poslije“
   su se lomili u dva. */
.sec-housecall-header .site-nav a {
  padding: 10px 11px;
  white-space: nowrap;
  font-weight: 500;
  color: var(--fd-text-muted);
  border-bottom-width: 2px;
  border-radius: var(--fd-r-xs) var(--fd-r-xs) 0 0;
}
.sec-housecall-header .site-nav a:hover,
.sec-housecall-header .site-nav a.is-current {
  color: var(--primary);
  border-bottom-color: var(--accent);
}

/* Telefon u zaglavlju: pun, akcentni. Broj se ne prelama. */
.sec-housecall-header .head-cta {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  flex: none;
  padding: 11px 18px;
  border-radius: var(--fd-r-sm);
  box-shadow: var(--fd-sh-sm);
  white-space: nowrap;
  font-weight: 700;
}
.sec-housecall-header .head-cta:hover { --btn-bg: var(--accent-strong); }

/* WhatsApp u zaglavlju — moj element, širok ekran (na telefonu ga
   preuzima lebdeća traka na dnu). */
.sec-housecall-header .head-wa {
  --btn-bg: transparent;
  --btn-fg: var(--fd-wa-dk);
  flex: none;
  min-height: 46px;
  padding: 11px 16px;
  border-radius: var(--fd-r-sm);
  border: 1.5px solid rgba(18, 140, 126, 0.32);
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.sec-housecall-header .head-wa svg { width: 19px; height: 19px; }
.sec-housecall-header .head-wa:hover {
  --btn-bg: rgba(18, 140, 126, 0.08);
  border-color: var(--fd-wa);
}

/* Zaglavlje stoji u JEDNOM redu sve do 941 px, gdje ga preuzima burger.
   Između 941 i 1199 px prostora nema za sve troje, pa se WhatsApp dugme
   sklanja (na telefonu ga ionako nosi lebdeća traka na dnu), a meni,
   naziv i telefon se stisnu. Bez ovoga se „O nama“, „Prije i poslije“
   i sam broj lome u dva reda. */
@media (max-width: 1199px) {
  .sec-housecall-header .head-wa { display: none; }
  .sec-housecall-header .site-head__inner { gap: 14px; }
  .sec-housecall-header .site-nav ul { gap: 0; }
  .sec-housecall-header .site-nav a { padding: 10px 8px; font-size: 0.875rem; }
  .sec-housecall-header .brand__tx strong { font-size: 1.08rem; }
  .sec-housecall-header .brand__tx small { font-size: 0.64rem; letter-spacing: 0.08em; }
  .sec-housecall-header .head-cta { padding: 11px 14px; font-size: 0.9rem; }
}

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

.sec-housecall-header .menu { background: var(--fd-bg); }
.sec-housecall-header .menu a { color: var(--primary); font-weight: 700; }
.sec-housecall-header .menu li:last-child a { color: var(--accent); }

/* Lebdeća traka na telefonu: poziv + WhatsApp. */
.sec-housecall-header .mobile-bar__i {
  border-radius: var(--fd-r-md);
  font-weight: 700;
  box-shadow: 0 10px 26px -10px rgba(20, 38, 44, 0.5);
}
.sec-housecall-header .mobile-bar__i--call { background: var(--primary); }
.sec-housecall-header .mobile-bar__i--wa { background: var(--fd-wa-dk); }

/* --------------------------------------------------------------------------
   2 · Hero
   -------------------------------------------------------------------------- */

.sec-calm-hero .hero {
  padding-top: clamp(28px, 5vw, 72px);
  padding-bottom: clamp(88px, 11vw, 150px);
  background:
    radial-gradient(88% 66% at 88% 4%, var(--fd-surface) 0%, transparent 58%),
    radial-gradient(66% 58% at 0% 100%, var(--accent-soft) 0%, transparent 62%),
    var(--fd-bg);
}

.sec-calm-hero .hero__blob--a {
  background: radial-gradient(circle at 34% 30%, #cfe6e0, var(--fd-surface) 62%, transparent 72%);
  opacity: 0.75;
}
.sec-calm-hero .hero__blob--b {
  background: radial-gradient(circle at 60% 40%, var(--accent-soft), transparent 68%);
}

.sec-calm-hero .hero__rating {
  border-radius: var(--fd-r-sm);
  border-color: var(--c-line);
  box-shadow: var(--fd-sh-sm);
}
.sec-calm-hero .hero__rating-g { background: var(--fd-bg-alt); }
.sec-calm-hero .hero__rating-text strong { color: var(--primary); }

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

/* Fotografija ostaje cijela: okvir prati omjer snimka (816 × 1020),
   bez organske maske koja bi odsjekla stomatologa u gornjem uglu. */
.sec-calm-hero .hero__frame {
  aspect-ratio: 816 / 1020;
  border-radius: var(--fd-r-2xl);
  animation: none;
  box-shadow: var(--fd-sh-xl);
  background: var(--fd-surface);
}
.sec-calm-hero .hero__frame :is(img, video) { object-position: 55% 50%; }

.sec-calm-hero .hero__ring { border-color: var(--c-line-strong); }

.sec-calm-hero .hero__card {
  padding: 12px 18px 12px 12px;
  border-radius: var(--fd-r-md);
  border-color: var(--c-line);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--fd-sh-lg);
}
.sec-calm-hero .hero__card-icon { background: var(--fd-surface); color: var(--accent); }
.sec-calm-hero .hero__card-text strong { color: var(--primary); font-weight: 700; }

/* Gornja kartica templata pada tačno preko stomatologove glave u gornjem
   lijevom uglu snimka. Raspored se ne dira — kartica se spusti na visinu
   mantila. Zbog toga ide i `animation: none`: lebdenje piše `transform`
   i pojelo bi pomak. */
.sec-calm-hero .hero__card--top {
  animation: none;
  transform: translateY(145px);
}
.sec-calm-hero .hero__card--bottom { animation: none; }

.sec-calm-hero .u-btn { border-radius: var(--fd-r-sm); font-weight: 700; }
.sec-calm-hero .u-btn--lg { border-radius: var(--fd-r-md); }
.sec-calm-hero .u-btn--primary { --btn-bg: var(--accent); box-shadow: var(--fd-sh-md); }
.sec-calm-hero .u-btn--primary:hover { --btn-bg: var(--accent-strong); box-shadow: var(--fd-sh-lg); }
.sec-calm-hero .u-btn--ghost { --btn-fg: var(--primary); --btn-bd: var(--c-line-strong); }
.sec-calm-hero .u-btn--ghost:hover { --btn-bd: var(--accent); --btn-bg: var(--fd-white); }

/* Talas na dnu heroja mora biti boje SLJEDEĆE sekcije (usluge). */
.sec-calm-hero .hero__wave path { fill: var(--fd-bg-alt); }

/* --------------------------------------------------------------------------
   3 · Usluge
   -------------------------------------------------------------------------- */

.sec-anker-services .u-label,
.sec-anker-referenzen .u-label,
.sec-fernhill-about .u-label,
.sec-meridian-results .u-label,
.sec-fundament-instagram .u-label {
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: transparent;
  letter-spacing: 0.1em;
}

.sec-anker-services .u-tab,
.sec-anker-referenzen .u-tab {
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.sec-anker-services .u-tab--jade,
.sec-anker-referenzen .u-tab--jade {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.sec-anker-services .u-tab--line,
.sec-anker-referenzen .u-tab--line {
  background: var(--fd-white);
  color: var(--primary);
  box-shadow: inset 0 0 0 1.5px var(--c-line-strong);
}

.sec-anker-services .sit {
  background: var(--fd-white);
  border-color: var(--c-line);
  border-radius: var(--fd-r-xl);
  box-shadow: var(--fd-sh-sm);
  transition: box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1), transform 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sec-anker-services .sit:hover {
  box-shadow: var(--fd-sh-md);
  transform: translateY(-3px);
  border-color: var(--c-line-strong);
}
.sec-anker-services .sit__ic {
  width: 48px; height: 48px;
  border-radius: var(--fd-r-md);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.sec-anker-services .sit h3 { color: var(--primary); }
.sec-anker-services .sit > p { color: var(--fd-text-muted); }
.sec-anker-services .sit__first { color: var(--primary); font-weight: 600; }
.sec-anker-services .sit__first span { color: var(--accent-strong); letter-spacing: 0.1em; }

/* --------------------------------------------------------------------------
   4 · Recenzije
   -------------------------------------------------------------------------- */

.sec-anker-referenzen .gsum {
  border-radius: var(--fd-r-xl);
  background: var(--fd-white);
  border-color: var(--c-line);
  box-shadow: var(--fd-sh-sm);
}
.sec-anker-referenzen .gsum__score strong { color: var(--primary); font-size: 2.5rem; }
.sec-anker-referenzen .u-stars { color: var(--fd-star); }
.sec-anker-referenzen .gsum__meta strong { color: var(--primary); }
.sec-anker-referenzen .gsum__link { color: var(--accent-strong); font-weight: 700; }
.sec-anker-referenzen .gsum__link:hover { color: var(--primary); }

.sec-anker-referenzen .rcard {
  background: var(--fd-white);
  border-color: var(--c-line);
  border-radius: var(--fd-r-xl);
  box-shadow: var(--fd-sh-sm);
  transition: box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1), transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sec-anker-referenzen .rcard:hover { box-shadow: var(--fd-sh-md); transform: translateY(-3px); }
.sec-anker-referenzen .rcard__tr p { color: var(--fd-text); }
.sec-anker-referenzen .rcard__who { color: var(--primary); font-weight: 700; }
.sec-anker-referenzen .rcard__src { color: var(--fd-text-muted); }

/* --------------------------------------------------------------------------
   5 · Traka sa brojkama (parallax)
   -------------------------------------------------------------------------- */

.sec-calm-parallax .plx { background: var(--primary); }

/* Zatamnjenje ide taman koliko treba da tekst bude čitljiv — fotografija
   ostaje fotografija. */
.sec-calm-parallax .plx__veil {
  background:
    radial-gradient(74% 92% at 50% 44%, rgba(20, 38, 44, 0.58), rgba(20, 38, 44, 0.84)),
    linear-gradient(180deg, rgba(20, 38, 44, 0.7), rgba(12, 26, 31, 0.9));
}
.sec-calm-parallax .plx__bg :is(img, video) { object-position: 50% 32%; }

/* Ivice moraju biti boje susjednih sekcija: gore recenzije, dolje „o nama“. */
.sec-calm-parallax .plx__edge--top path,
.sec-calm-parallax .plx__edge--bottom path { fill: var(--fd-bg); }

.sec-calm-parallax .plx__eyebrow {
  border-radius: var(--r-pill);
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.1);
  color: var(--fd-on-dark);
  letter-spacing: 0.11em;
}
.sec-calm-parallax .plx__title { color: #fff; text-shadow: 0 2px 22px rgba(8, 20, 24, 0.4); }
.sec-calm-parallax .plx__lead { color: var(--fd-on-dark-mu); max-width: 52ch; }

.sec-calm-parallax .plx__stats {
  border-radius: var(--fd-r-xl);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.sec-calm-parallax .plx__stats li { border-right-color: rgba(255, 255, 255, 0.14); }
.sec-calm-parallax .plx__num { color: #fff; font-weight: 700; }
.sec-calm-parallax .plx__label { color: var(--fd-on-dark-mu); }

.sec-calm-parallax .u-btn { border-radius: var(--fd-r-md); font-weight: 700; }
.sec-calm-parallax .u-btn--white { --btn-fg: var(--primary); box-shadow: var(--fd-sh-md); }
.sec-calm-parallax .u-btn--white:hover { --btn-bg: var(--fd-surface); }

/* --------------------------------------------------------------------------
   6 · O nama
   -------------------------------------------------------------------------- */

.sec-fernhill-about .about { background: var(--fd-bg); }

/* Okvir se prilagođava slici (680 × 1020), umjesto da fiksna visina
   odsiječe glave. */
.sec-fernhill-about .about__media {
  border-radius: var(--fd-r-xl);
  border-color: var(--c-line);
  box-shadow: var(--fd-sh-md);
}
.sec-fernhill-about .about__media :is(img, video) {
  height: auto;
  aspect-ratio: 680 / 1020;
  object-fit: cover;
  object-position: 50% 35%;
}

/* Sekcija centrira oba stupca po visini, pa niži od njih „pluta“ na
   sredini: na 1440 px „ORDINACIJA“ kreće 75 px ispod vrha fotografije, a
   na 941 px je obrnuto. Automatska donja margina pojede slobodan prostor
   i oba stupca sjednu na vrh reda — na svakoj širini, bez obzira koji je
   duži. Ovo je `margin`, ne `align-items`: raspored sekcije je netaknut. */
.sec-fernhill-about .about__media,
.sec-fernhill-about .about__copy { margin-bottom: auto; }

.sec-fernhill-about .about__copy h2 { max-width: 20ch; }
.sec-fernhill-about .about__lead { color: var(--fd-text); }
.sec-fernhill-about .about__text { color: var(--fd-text-muted); }
.sec-fernhill-about .about__points svg { background: var(--accent-soft); color: var(--accent-strong); }
.sec-fernhill-about .about__points span { color: var(--fd-text-muted); }
.sec-fernhill-about .about__points strong { color: var(--primary); }

/* Kartica člana tima sada stoji U desnom stupcu, odmah ispod teksta
   (premještena u `.about__copy`), pa čini jedan neprekinut stubac s
   naslovom i nabrajanjem umjesto da visi u praznom ispod fotografije.
   Razmak do nabrajanja iznad je ritam sekcije, ne dvostruki skok. */
.sec-fernhill-about .team { margin-top: var(--sp-5); }

/* Mreža `.team` je dvostubačna jer templat očekuje dva doktora; u bazi
   je jedan. Da jedina kartica ne bi ostala na pola stupca, dobija
   širinu dvije kolone plus razmak — mreža i njena geometrija ostaju
   netaknute. Ispod 941 px mreža je ionako jednostubačna. */
@media (min-width: 941px) {
  .sec-fernhill-about .team__i { width: calc(200% + clamp(16px, 2vw, 26px)); }
}

.sec-fernhill-about .team__i {
  background: var(--fd-white);
  border-color: var(--c-line);
  border-radius: var(--fd-r-xl);
  box-shadow: var(--fd-sh-sm);
  max-width: none;
}
.sec-fernhill-about .team__i :is(img, video) {
  width: 92px; height: 92px;
  border-radius: var(--fd-r-md);
  object-position: 50% 16%;
  background: var(--fd-surface);
}
.sec-fernhill-about .team__i strong { color: var(--primary); font-size: var(--fs-lg); font-weight: 700; }
.sec-fernhill-about .team__i > div > span { color: var(--accent-strong); }
.sec-fernhill-about .team__i p { color: var(--fd-text-muted); }

/* --------------------------------------------------------------------------
   7 · Prije i poslije
   -------------------------------------------------------------------------- */

.sec-meridian-results .res { background: var(--fd-bg-alt); }

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

/* Okvir poređenja prati omjer fotografija (900 × 491) — ništa se ne siječe. */
.sec-meridian-results .cmp {
  aspect-ratio: 900 / 491;
  border-radius: var(--fd-r-md);
  background: var(--fd-surface);
}
.sec-meridian-results .cmp__grip {
  width: 44px; height: 44px;
  color: var(--accent-strong);
  box-shadow: var(--fd-sh-md);
}
.sec-meridian-results .cmp__tag { border-radius: var(--r-pill); font-weight: 700; }
.sec-meridian-results .cmp__tag--b { background: rgba(255, 255, 255, 0.94); color: var(--primary); }
.sec-meridian-results .cmp__tag--a { background: var(--accent); color: #fff; }

.sec-meridian-results .case__body h3 { color: var(--primary); }
.sec-meridian-results .case__body > p { color: var(--fd-text-muted); }

/* --------------------------------------------------------------------------
   8 · Instagram
   -------------------------------------------------------------------------- */

/* Templat ove sekcije čuva 88 px lijevo za svoju „sticky“ traku
   (`.srail`) — a ta traka živi u DRUGIM sekcijama tog templata i u ovom
   paketu je nema. Zbog toga je sadržaj bio uvučen 88 px više od svih
   ostalih sekcija. Traka je široka nula, pa se kontejner poravna sa
   ostatkom sajta. Mijenja se samo vrijednost tokena, ne raspored. */
.sec-fundament-instagram { --rail-w: 0px; }

.sec-fundament-instagram .ig { background: var(--fd-bg); }

.sec-fundament-instagram .ig__profile {
  border-radius: var(--fd-r-md);
  background: var(--fd-white);
  border-color: var(--c-line);
  box-shadow: var(--fd-sh-sm);
}
.sec-fundament-instagram .ig__profile-ic { border-radius: var(--fd-r-sm); }
.sec-fundament-instagram .ig__profile-tx strong { color: var(--primary); font-weight: 700; }
.sec-fundament-instagram .ig__profile-tx small { color: var(--fd-text-muted); }

/* Snimci su „prije i poslije“ kolaži — 9:16 bi ih presjekao po sredini. */
.sec-fundament-instagram .reel__link {
  aspect-ratio: 4 / 5;
  border-radius: var(--fd-r-xl);
  box-shadow: var(--fd-sh-md);
}
.sec-fundament-instagram .reel__link:hover { box-shadow: var(--fd-sh-lg); }
.sec-fundament-instagram .reel__link::after {
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(12, 26, 31, 0.86));
}
.sec-fundament-instagram .reel__meta strong { font-weight: 700; }

/* Kartice sa fotografijama otvaraju galeriju — bez značke „play“,
   jer to nisu snimci. */
.sec-fundament-instagram .reel__link[data-fd-gallery] { cursor: zoom-in; }

/* Značku nosi SAMO kartica koja zaista vodi na snimak. */
.sec-fundament-instagram .reel__play {
  width: 46px; height: 46px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--fd-sh-sm);
}
.sec-fundament-instagram .reel__play::before { border-left-color: var(--accent-strong); }
.sec-fundament-instagram .reel__link:hover .reel__play { background: var(--accent); }
.sec-fundament-instagram .reel__link:hover .reel__play::before { border-left-color: #fff; }

/* --------------------------------------------------------------------------
   9 · Česta pitanja
   -------------------------------------------------------------------------- */

.sec-calm-faq .faq {
  background: linear-gradient(180deg, var(--fd-bg) 0%, var(--fd-bg-alt) 100%);
}
.sec-calm-faq .faq__blob {
  background: radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 70%);
  opacity: 0.85;
}
.sec-calm-faq .u-eyebrow { color: var(--accent-strong); letter-spacing: 0.11em; }
.sec-calm-faq .u-eyebrow::before { background: var(--accent); }
.sec-calm-faq .u-head p { color: var(--fd-text-muted); }

.sec-calm-faq .faq__item {
  background: var(--fd-white);
  border-color: var(--c-line);
  border-radius: var(--fd-r-md);
  box-shadow: var(--fd-sh-xs);
}
.sec-calm-faq .faq__item.is-open { border-color: var(--c-line-strong); box-shadow: var(--fd-sh-md); }
.sec-calm-faq .faq__q button { border-radius: var(--fd-r-md); color: var(--primary); font-weight: 700; }
.sec-calm-faq .faq__q button:hover { background: var(--fd-surface-soft); }
.sec-calm-faq .faq__sign { background: var(--fd-surface); }
.sec-calm-faq .faq__sign::before,
.sec-calm-faq .faq__sign::after { background: var(--accent-strong); }
.sec-calm-faq .faq__q button[aria-expanded="true"] .faq__sign { background: var(--accent); }
.sec-calm-faq .faq__panel-in > p { color: var(--fd-text-muted); }

/* --------------------------------------------------------------------------
   10 · Poziv na akciju
   -------------------------------------------------------------------------- */

.sec-calm-cta .cta { background: var(--fd-bg-alt); }

.sec-calm-cta .cta__card {
  border-radius: var(--fd-r-2xl);
  box-shadow: var(--fd-sh-xl);
  background:
    radial-gradient(122% 122% at 6% 0%, #235a52 0%, #17383f 42%, var(--primary) 100%);
}
.sec-calm-cta .cta__blob--a {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12), transparent 68%);
}
.sec-calm-cta .cta__blob--b {
  background: radial-gradient(circle at 50% 50%, rgba(111, 208, 189, 0.24), transparent 66%);
}

/* Akcent brenda je taman — na tamnoj kartici ide svijetla varijanta. */
.sec-calm-cta .cta__eyebrow { color: var(--fd-accent-lite); letter-spacing: 0.11em; }
.sec-calm-cta .cta__eyebrow::before { background: var(--fd-accent-lite); }
.sec-calm-cta .cta__copy h2 { color: #fff; }
.sec-calm-cta .cta__copy p { color: var(--fd-on-dark-mu); }

.sec-calm-cta .ctabtn {
  border-radius: var(--fd-r-md);
  background: var(--fd-white);
  color: var(--primary);
  box-shadow: var(--fd-sh-md);
}
.sec-calm-cta .ctabtn:hover { box-shadow: var(--fd-sh-xl); }
.sec-calm-cta .ctabtn__icon { border-radius: var(--fd-r-sm); background: var(--fd-surface); color: var(--accent-strong); }
.sec-calm-cta .ctabtn__text strong { font-weight: 700; }
.sec-calm-cta .ctabtn__text small { color: var(--fd-text-muted); }
.sec-calm-cta .ctabtn__arrow { background: var(--fd-bg-alt); }
.sec-calm-cta .ctabtn--wa .ctabtn__icon { background: rgba(18, 140, 126, 0.12); color: var(--fd-wa-dk); }
.sec-calm-cta .ctabtn--wa:hover .ctabtn__icon { background: var(--fd-wa); color: #fff; }
.sec-calm-cta .ctabtn--tel:hover .ctabtn__icon { background: var(--accent); color: #fff; }

.sec-calm-cta .cta__note {
  border-radius: var(--fd-r-sm);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--fd-on-dark-mu);
}
.sec-calm-cta .cta__note svg { color: var(--fd-accent-lite); }

/* --------------------------------------------------------------------------
   11 · Podnožje
   -------------------------------------------------------------------------- */

.sec-calm-footer .ftr {
  padding-top: clamp(80px, 10vw, 128px);
  background:
    radial-gradient(112% 92% at 12% 0%, #1d4a4a 0%, #163338 46%, var(--primary) 100%);
  color: var(--fd-on-dark-mu);
}
.sec-calm-footer .ftr__edge path { fill: var(--fd-bg-alt); }

.sec-calm-footer .ftr__logo-mark {
  width: 46px; height: 46px;
  border-radius: var(--fd-r-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.sec-calm-footer .ftr__logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.sec-calm-footer .ftr__logo-text strong { font-weight: 700; color: #fff; }
.sec-calm-footer .ftr__logo-text small { color: var(--fd-on-dark-mu); letter-spacing: 0.1em; }
.sec-calm-footer .ftr__blurb { color: var(--fd-on-dark-mu); }

.sec-calm-footer .ftr__social a {
  border-radius: var(--fd-r-sm);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}
.sec-calm-footer .ftr__social a:hover { background: rgba(255, 255, 255, 0.2); }

.sec-calm-footer .ftr__h { color: var(--fd-accent-lite); font-weight: 700; letter-spacing: 0.11em; }
.sec-calm-footer .ftr__col ul a { color: var(--fd-on-dark-mu); }
.sec-calm-footer .ftr__col ul a:hover { color: #fff; }

.sec-calm-footer .ftr__contact address { color: var(--fd-on-dark-mu); }
.sec-calm-footer .ftr__link { color: var(--fd-on-dark-mu); }
.sec-calm-footer .ftr__link:hover { color: #fff; }
.sec-calm-footer .ftr__map svg { color: var(--fd-accent-lite); }

.sec-calm-footer .ftr__hours { max-width: none; }
.sec-calm-footer .ftr__hours th { color: var(--fd-on-dark-mu); font-weight: 500; }
.sec-calm-footer .ftr__hours td { color: #fff; line-height: 1.45; }
.sec-calm-footer .ftr__hours th,
.sec-calm-footer .ftr__hours td { border-bottom-color: rgba(255, 255, 255, 0.14); padding: 9px 0; }

.sec-calm-footer .ftr__bar { background: rgba(0, 0, 0, 0.18); border-top-color: rgba(255, 255, 255, 0.12); }
.sec-calm-footer .ftr__bar-inner { color: rgba(255, 255, 255, 0.6); }

.sec-calm-footer .ftr__top {
  border-radius: var(--fd-r-sm);
  background: #fff;
  color: var(--primary);
  box-shadow: var(--fd-sh-lg);
}
.sec-calm-footer .ftr__top:hover { background: var(--fd-surface); }

/* --------------------------------------------------------------------------
   Galerija radova — moj dijalog, izvan sekcija (`assets/gallery.js`)
   -------------------------------------------------------------------------- */

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

.fd-lb__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 26, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: zoom-out;
}
.fd-lb.is-open .fd-lb__scrim { opacity: 1; }

.fd-lb__panel {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fd-lb.is-open .fd-lb__panel { opacity: 1; transform: none; }

.fd-lb__figure {
  margin: 0;
  border-radius: var(--fd-r-xl);
  overflow: hidden;
  background: var(--fd-ink);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}
.fd-lb__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 190px);
  object-fit: contain;
  background: var(--fd-ink);
}

.fd-lb__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px 16px;
  background: var(--fd-ink);
  color: #fff;
}
.fd-lb__title {
  font-family: var(--font-display-rounded);
  font-size: 1.0625rem;
  font-weight: 700;
}
.fd-lb__count {
  flex: none;
  font-size: 0.8125rem;
  color: rgba(233, 242, 240, 0.7);
  font-variant-numeric: tabular-nums;
}

/* Strelice */
.fd-lb__nav,
.fd-lb__close {
  position: absolute;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
  transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fd-lb__nav {
  top: calc(50% - 46px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.fd-lb__nav svg { width: 24px; height: 24px; }
.fd-lb__nav--prev { left: -26px; }
.fd-lb__nav--next { right: -26px; }
.fd-lb__nav:hover { background: #fff; transform: scale(1.06); }
.fd-lb__nav:disabled { opacity: 0.3; cursor: default; transform: none; }

/* Na posljednjoj slici strelica naprijed postaje Instagram. */
.fd-lb__ic-ig { display: none; }
.fd-lb.is-last .fd-lb__ic-next { display: none; }
.fd-lb.is-last .fd-lb__ic-ig { display: block; }
.fd-lb.is-last .fd-lb__nav--next {
  background: linear-gradient(135deg, #f9c846 0%, #e8593f 45%, #b438a8 100%);
  color: #fff;
}

.fd-lb__close {
  top: -18px;
  right: -18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.fd-lb__close svg { width: 20px; height: 20px; }
.fd-lb__close:hover { background: #fff; transform: scale(1.06); }

.fd-lb__hint {
  margin: 12px 0 0;
  min-height: 1.2em;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(233, 242, 240, 0.72);
}

.fd-lb :focus-visible {
  outline: 3px solid var(--fd-accent-lite);
  outline-offset: 3px;
}

/* Uski ekran: strelice ne stanu pored slike, pa silaze pod nju. */
@media (max-width: 780px) {
  .fd-lb__panel { width: 100%; }
  .fd-lb__img { max-height: calc(100vh - 240px); }
  .fd-lb__nav {
    top: auto;
    bottom: -68px;
    width: 54px;
    height: 54px;
  }
  .fd-lb__nav--prev { left: calc(50% - 66px); }
  .fd-lb__nav--next { right: calc(50% - 66px); }
  .fd-lb__close { top: -14px; right: -6px; }
  .fd-lb__hint { margin-top: 78px; }
}

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

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

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

  /* Lebdeća traka ne smije pokriti kraj podnožja. */
  .sec-calm-footer .ftr__bar-inner { padding-bottom: 88px; }
}

@media (max-width: 700px) {
  /* Hero: iznad pregiba stoje naslov i jedno dugme. */
  .sec-calm-hero .hero { padding-top: 26px; padding-bottom: clamp(72px, 16vw, 110px); }
  .sec-calm-hero .hero__copy > * + * { margin-top: 18px; }
  .sec-calm-hero .hero h1 { max-width: none; }
  .sec-calm-hero .hero__lead { font-size: var(--fs-md); max-width: 38ch; }
  .sec-calm-hero .hero__rating { padding: 6px 14px 6px 8px; font-size: var(--fs-xs); }
  .sec-calm-hero .hero__rating-g { width: 26px; height: 26px; }

  /* Dva jednaka dugmeta jedno ispod drugog nemaju hijerarhiju:
     drugo je lakše i niže. */
  .sec-calm-hero .hero__actions { gap: 10px; }
  .sec-calm-hero .hero__actions .u-btn--lg { min-height: 54px; padding: 15px 24px; font-size: var(--fs-md); }
  .sec-calm-hero .hero__actions .u-btn--ghost { min-height: 48px; padding: 12px 20px; font-size: var(--fs-sm); }

  /* Kartice preko slike na uskom ekranu sitnije, da ne pokriju lice. */
  .sec-calm-hero .hero__card { padding: 9px 13px 9px 9px; box-shadow: var(--fd-sh-md); }
  .sec-calm-hero .hero__card--top { transform: translateY(105px); }
  .sec-calm-hero .hero__card-icon { width: 32px; height: 32px; }
  .sec-calm-hero .hero__card-icon svg { width: 17px; height: 17px; }
  .sec-calm-hero .hero__card-text strong { font-size: var(--fs-xs); }
  .sec-calm-hero .hero__card-text small { font-size: 0.72rem; }

  .sec-anker-services .sit { padding: 22px; padding-top: 28px; }
  .sec-anker-referenzen .rcard { padding: 22px; padding-top: 28px; }

  .sec-calm-parallax .plx { padding-block: clamp(76px, 16vw, 120px); }
  .sec-calm-parallax .plx__stats { padding: 20px 16px; }

  .sec-fernhill-about .about__media :is(img, video) { aspect-ratio: 4 / 3; object-position: 50% 30%; }
  .sec-fernhill-about .team__i :is(img, video) { width: 76px; height: 76px; }

  .sec-meridian-results .cmp__grip { width: 38px; height: 38px; }
  .sec-meridian-results .cmp__grip svg { width: 20px; height: 20px; }

}

@media (max-width: 560px) {
  /* Okvir heroja: omjer fotografije se zadržava i na telefonu. */
  .sec-calm-hero .hero__frame { aspect-ratio: 816 / 1020; }
}
/* ==========================================================================
   5. ŠTAMPA
   Sekcije već gase svoje lebdeće elemente u vlastitom `@media print`;
   ovdje se samo pozadina stranice vrati na bijelo.
   ========================================================================== */

@media print {
  body { background: #fff; }
}