/* ============================================================
   DR. AMOR — vlastiti sloj stila.

   Učitava se POSLIJE sekcijskih stilova i brend.css-a i samo
   prevezuje njihove tokene: boje, pisma, radijuse, sjenke i
   razmake. Geometrija sekcija (display, grid-*, position,
   align-*, text-align) se ovdje NE dira — ona ostaje u
   sekcije/<sekcija>/section.css.

   Paleta dolazi iz logotipa firme: limun-zelena #8DC83E sa štita,
   tamnija zelena za tekst i podloge. Vrijednosti su u
   sekcije/tokens.css.
   ============================================================ */

/* ---------- 1. dokument ---------- */

:root {
  /* visina zaglavlja pod drugim imenom, da je sekcije mogu čitati
     bez ciklusa (--header-h se u sekciji veže NA ovu) */
  --head-h: 74px;

  --site-bg: #fbfcf8;
  --site-bg-alt: #f2f6ea;
  --site-ink: #1e2a18;
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--site-bg);
  color: var(--site-ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  /* clip, ne hidden — hidden pravi scroll kontejner i lomi sticky */
  overflow-x: clip;
}

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

.band { position: relative; background: var(--site-bg); }
.band[data-band="1"] { background: transparent; }

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

/* ---------- 2. zajednički tokeni za SVE sekcije ----------
   Ovim sajt prestaje biti deset različitih templata.
   Boje vezane za brend (--c-primary*, --c-accent*) dolaze iz
   brend.css-a i ovdje se ne diraju.                        */

.sec-klar-header,
.sec-haven-hero,
.sec-sightline-services,
.sec-calm-referenzen,
.sec-calm-parallax,
.sec-housecall-about,
.sec-bloom-results,
.sec-sonnenschein-faq,
.sec-haven-cta,
.sec-housecall-footer {
  /* — pismo: jedno na cijelom sajtu — */
  --ff-display: var(--font-display-rounded);
  --ff-body: var(--font-sans);

  /* — neutrali — */
  --c-bg: #fbfcf8;
  --c-bg-alt: #f2f6ea;
  --c-white: #ffffff;
  --c-surface: #e9f1dc;
  --c-surface-soft: #f3f8ea;
  --c-ink: #1e2a18;
  --c-text: #1e2a18;
  --c-text-muted: #55604d;
  --c-text-invert: #ffffff;
  --c-on-dark: #f1f6e9;
  --c-on-dark-mu: rgba(241, 246, 233, 0.78);

  --c-line: rgba(30, 42, 24, 0.12);
  --c-line-strong: rgba(30, 42, 24, 0.22);
  --c-line-dark: rgba(241, 246, 233, 0.24);
  --c-border: rgba(30, 42, 24, 0.12);
  --c-border-strong: rgba(30, 42, 24, 0.24);

  --c-star: #dfa32c;
  --c-whatsapp: #128c7e;
  --c-whatsapp-dk: #0e6f63;
  --c-whatsapp-vivid: #25d366;

  /* — zaobljenja: jedna skala, mekana — */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;
  --r-circle: 50%;
  --r-card: 18px;
  --r-card-lg: 26px;
  --r-gallery: 14px;
  --r-squircle: 26px;
  --r-leaf: 28px;
  --r-leaf-alt: 28px;

  /* — sjenke: jedna porodica, zelenkasta — */
  --sh-xs: 0 1px 2px rgba(28, 46, 18, 0.06);
  --sh-sm: 0 4px 14px -6px rgba(28, 46, 18, 0.16);
  --sh-md: 0 14px 30px -14px rgba(28, 46, 18, 0.22);
  --sh-lg: 0 24px 52px -22px rgba(28, 46, 18, 0.26);
  --sh-xl: 0 40px 84px -30px rgba(28, 46, 18, 0.3);

  /* — ritam — */
  --section-y: clamp(56px, 7.4vw, 104px);
  --gutter: clamp(20px, 5vw, 40px);
  --maxw: 1140px;
  --maxw-text: 720px;

  /* — visina zaglavlja: ista svuda — */
  --header-h: 74px;
  --util-h: 0px;
}

@media (max-width: 900px) {
  .sec-klar-header,
  .sec-haven-hero,
  .sec-sightline-services,
  .sec-calm-referenzen,
  .sec-calm-parallax,
  .sec-housecall-about,
  .sec-bloom-results,
  .sec-sonnenschein-faq,
  .sec-haven-cta,
  .sec-housecall-footer { --header-h: 62px; }
}

/* Tipografija naslova — ista težina i prored svuda. */
.sec-klar-header :is(h1, h2, h3, h4),
.sec-haven-hero :is(h1, h2, h3, h4),
.sec-sightline-services :is(h1, h2, h3, h4),
.sec-calm-referenzen :is(h1, h2, h3, h4),
.sec-calm-parallax :is(h1, h2, h3, h4),
.sec-housecall-about :is(h1, h2, h3, h4),
.sec-bloom-results :is(h1, h2, h3, h4),
.sec-sonnenschein-faq :is(h1, h2, h3, h4),
.sec-haven-cta :is(h1, h2, h3, h4),
.sec-housecall-footer :is(h1, h2, h3, h4) {
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* Fokus — jedan prsten na cijelom sajtu. */
.sec-klar-header :focus-visible,
.sec-haven-hero :focus-visible,
.sec-sightline-services :focus-visible,
.sec-calm-referenzen :focus-visible,
.sec-calm-parallax :focus-visible,
.sec-housecall-about :focus-visible,
.sec-bloom-results :focus-visible,
.sec-sonnenschein-faq :focus-visible,
.sec-haven-cta :focus-visible,
.sec-housecall-footer :focus-visible {
  outline: 3px solid var(--c-accent-dk);
  outline-offset: 3px;
}

/* ---------- 3. zaglavlje ---------- */

/* Prozirno iznad heroja, puno kad se skrola. Sekcija je crtana za
   svijetao hero, a naš je fotografija — pa se boje teksta u
   „neslijepljenom" stanju prepisuju na svijetle. */
.sec-klar-header .site-head {
  height: var(--header-h);
  background: transparent;
}
.sec-klar-header .site-head.is-stuck {
  background: rgba(251, 252, 248, 0.93);
  box-shadow: 0 1px 0 var(--c-line), var(--sh-sm);
}

.sec-klar-header .site-head:not(.is-stuck) .brand__tx strong { color: #fff; }
.sec-klar-header .site-head:not(.is-stuck) .brand__tx small { color: rgba(255, 255, 255, 0.8); }
.sec-klar-header .site-head:not(.is-stuck) .site-nav a { color: rgba(255, 255, 255, 0.92); }
.sec-klar-header .site-head:not(.is-stuck) .site-nav a:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.sec-klar-header .site-head:not(.is-stuck) .head-tel { color: #fff; }

.sec-klar-header .brand__mark {
  width: 40px; height: 40px;
  padding: 3px;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--sh-xs);
}
.sec-klar-header .brand__mark img { width: 100%; height: 100%; }

.sec-klar-header .brand__tx strong {
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--c-primary-dk);
}
.sec-klar-header .brand__tx small {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--c-text-muted);
}

.sec-klar-header .site-nav a { font-weight: 700; white-space: nowrap; padding: 10px 13px; }

.sec-klar-header .head-price {
  --st-bg: var(--c-accent);
  --st-fg: #1c2a12;
  font-weight: 800;
}

.sec-klar-header .head-tel {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--c-primary-dk);
  padding: 10px 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sec-klar-header .head-cta {
  --btn-bg: var(--c-whatsapp);
  --btn-fg: #fff;
  min-height: 44px;
  padding: 11px 20px;
  font-weight: 800;
}
.sec-klar-header .head-cta:hover { --btn-bg: var(--c-whatsapp-dk); }
.sec-klar-header .head-cta svg { width: 18px; height: 18px; }

.sec-klar-header .burger { background: #fff; }

/* Meni preko cijelog ekrana.
   Traka zaglavlja OSTAJE iznad panela — u panelu nema svog dugmeta za
   zatvaranje, pa burger mora ostati na dohvat prsta. Umjesto toga se,
   dok je meni otvoren, traka gasi u prozirno da se ne vidi kao svijetla
   pruga preko tamnog panela. */
.sec-klar-header .fmenu__sheet { background: var(--c-primary-dk); }
.sec-klar-header:has(.fmenu:not([hidden])) .site-head,
.sec-klar-header:has(.fmenu:not([hidden])) .site-head.is-stuck {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sec-klar-header:has(.fmenu:not([hidden])) .brand__tx strong { color: #fff; }
.sec-klar-header:has(.fmenu:not([hidden])) .brand__tx small { color: rgba(255, 255, 255, 0.8); }
.sec-klar-header .fmenu__list a { font-weight: 800; }
.sec-klar-header .fmenu__list a:active { color: var(--c-accent); }
.sec-klar-header .fmenu__foot .u-btn--accent {
  --btn-bg: var(--c-whatsapp);
  --btn-fg: #fff;
}
.sec-klar-header .fmenu__hours { color: var(--c-on-dark-mu); }

/* Ljepljiva traka na telefonu: WhatsApp mora biti nadohvat ODMAH,
   ne tek poslije 480 px skrola — zato je vidljiva od početka. */
.sec-klar-header .mobile-bar {
  transform: translate(-50%, 0);
  box-shadow: 0 -2px 40px -12px rgba(28, 46, 18, 0.45), var(--sh-lg);
}
.sec-klar-header .mobile-bar__i { font-weight: 800; }
.sec-klar-header .mobile-bar__i--wa { color: var(--c-whatsapp); }
.sec-klar-header .mobile-bar__i--cta { background: var(--c-primary); color: #fff; }

/* Sekcija zaglavlja nema visinu (zaglavlje je fixed), pa bi njen
   padding-bottom bio prazna traka na vrhu stranice. Prostor za
   ljepljivu traku već ima podnožje. */
@media (max-width: 620px) {
  .sec-klar-header { padding-bottom: 0; }
}

/* ---------- 4. hero ---------- */

.sec-haven-hero .hero {
  min-height: clamp(560px, 92svh, 940px);
  background: var(--c-primary-dk);
}

.sec-haven-hero .hero__media { background: var(--c-primary-dk); }
.sec-haven-hero .hero__media :is(img, video) { object-position: center 34%; }

.sec-haven-hero .hero__scrim {
  background:
    linear-gradient(to top, rgba(18, 30, 12, 0.9) 0%, rgba(18, 30, 12, 0.72) 26%, rgba(18, 30, 12, 0.26) 60%, rgba(18, 30, 12, 0.06) 100%),
    linear-gradient(to bottom, rgba(18, 30, 12, 0.55) 0%, transparent 24%);
}

.sec-haven-hero .hero__eyebrow {
  color: var(--c-accent-soft);
  font-weight: 800;
}
.sec-haven-hero .hero h1 { max-width: 17ch; }
.sec-haven-hero .hero__lead { max-width: 46ch; color: rgba(241, 246, 233, 0.92); }

.sec-haven-hero .hero__act .u-btn { font-weight: 800; }
.sec-haven-hero .hero__act .u-btn--white {
  --btn-bg: #fff;
  --btn-fg: var(--c-primary-dk);
}
.sec-haven-hero .hero__act .u-btn--ghost {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.45);
}
.sec-haven-hero .hero__act .u-btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.14); --btn-bd: #fff; }

/* Kontrola pauze nad videom — da ne pada preko teksta. */
.sec-haven-hero .u-mediactl { right: 14px; bottom: 14px; }

/* — telefon: slika je svoj blok, tekst ide ISPOD nje —
   Zadana visina na .hero__media poništava vezanje donje ivice iz
   `inset: 0` (over-constrained), pa slika dobije stvaran okvir. */
@media (max-width: 640px) {
  .sec-haven-hero .hero {
    min-height: 0;
    padding-top: calc(var(--header-h) + 66vw + 24px);
    padding-bottom: 32px;
    background: var(--c-primary-dk);
  }
  .sec-haven-hero .hero__media {
    height: calc(var(--header-h) + 66vw);
    transform: none !important;
  }
  .sec-haven-hero .hero__media :is(img, video) {
    object-position: center 32%;
    animation: none;
    transform: none;
  }
  /* zatamnjenja preko slike više nema — tekst nije na njoj;
     ostaje samo kratak prelaz ispod trake zaglavlja */
  .sec-haven-hero .hero__scrim {
    height: calc(var(--header-h) + 66vw);
    background: linear-gradient(to bottom, rgba(18, 30, 12, 0.55) 0%, rgba(18, 30, 12, 0) 34%);
  }
  .sec-haven-hero .hero__copy > * + * { margin-top: 14px; }
  .sec-haven-hero .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); text-shadow: none; }
  .sec-haven-hero .hero__lead { font-size: 1rem; }
  /* Dva dugmeta idu u JEDAN red: jedno ispod drugog uzimaju pola
     ekrana i završe ispod ljepljive trake na dnu. */
  .sec-haven-hero .hero__act { padding-top: 6px; gap: 10px; }
  .sec-haven-hero .hero__act .u-btn { flex: 1 1 0; min-width: 0; }
  .sec-haven-hero .hero__act .u-btn--lg {
    min-height: 52px;
    padding: 14px 10px;
    font-size: 0.9375rem;
    gap: 8px;
  }
  .sec-haven-hero .hero__act .u-btn svg { width: 17px; height: 17px; }
}

/* Nizak telefon (SE i slični): slika i tipografija se skupljaju još
   jednom, da ljepljiva traka na dnu ne padne preko dugmadi. */
@media (max-width: 640px) and (max-height: 720px) {
  .sec-haven-hero .hero {
    padding-top: calc(var(--header-h) + 55vw + 18px);
    padding-bottom: 26px;
  }
  .sec-haven-hero .hero__media,
  .sec-haven-hero .hero__scrim { height: calc(var(--header-h) + 55vw); }
  .sec-haven-hero .hero__copy > * + * { margin-top: 11px; }
  .sec-haven-hero .hero h1 { font-size: clamp(1.6rem, 7.4vw, 2rem); }
  .sec-haven-hero .hero__lead { font-size: 0.9375rem; }
  .sec-haven-hero .hero__eyebrow { font-size: 0.6875rem; }
}

/* ---------- 5. usluge ---------- */

.sec-sightline-services .svcs { background: var(--c-bg); }
.sec-sightline-services .u-label { font-weight: 800; }

.sec-sightline-services .plan-t__in {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-xs);
  gap: 12px;
  transition: box-shadow 260ms var(--ease-out), border-color 260ms var(--ease);
}
.sec-sightline-services .plan-t__in:hover {
  box-shadow: var(--sh-md);
  border-color: var(--c-accent);
}
.sec-sightline-services .plan-t__ic {
  width: 52px; height: 52px;
  border-radius: 15px;
  background: var(--c-accent-soft);
  color: var(--c-accent-dk);
}
.sec-sightline-services .plan-t__ic svg { width: 27px; height: 27px; }
.sec-sightline-services .plan-t h3 { color: var(--c-primary-dk); }
.sec-sightline-services .plan-t__find { font-size: var(--fs-sm); }

.sec-sightline-services .price__in {
  background: var(--c-primary-dk);
  border-radius: var(--r-card-lg);
  border: 0;
  box-shadow: var(--sh-lg);
  color: var(--c-on-dark);
}
.sec-sightline-services .price__label { color: var(--c-accent); font-weight: 800; }
.sec-sightline-services .price__main strong { color: #fff; font-weight: 800; letter-spacing: -0.03em; }
.sec-sightline-services .price__main p { color: var(--c-on-dark-mu); font-size: var(--fs-md); }
.sec-sightline-services .price__no li {
  border-left: 3px solid var(--c-accent);
  color: var(--c-on-dark-mu);
  font-size: var(--fs-sm);
}
.sec-sightline-services .price__no strong { color: #fff; font-weight: 800; }

/* ---------- 6. utisci ---------- */

.sec-calm-referenzen .revs { background: var(--c-bg-alt); }
.sec-calm-referenzen .u-eyebrow { color: var(--c-accent-dk); font-weight: 800; }
.sec-calm-referenzen .revs__blob {
  background: radial-gradient(circle at 50% 50%, var(--c-surface), transparent 70%);
}

.sec-calm-referenzen .revsum {
  background: linear-gradient(150deg, var(--c-surface-soft), var(--c-white) 62%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
.sec-calm-referenzen .revsum__num { color: var(--c-primary-dk); font-weight: 800; }
.sec-calm-referenzen .revsum__cta .u-btn--ghost {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-primary-dk);
  --btn-bd: var(--c-border-strong);
}
.sec-calm-referenzen .revsum__cta .u-btn--ghost:hover { --btn-bd: var(--c-accent-dk); --btn-bg: var(--c-accent-soft); }
.sec-calm-referenzen .revsum__write { color: var(--c-accent-dk); }

.sec-calm-referenzen .revcard {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}
.sec-calm-referenzen .revcard:hover { box-shadow: var(--sh-md); border-color: var(--c-accent); }
.sec-calm-referenzen .revcard__id strong { color: var(--c-primary-dk); font-weight: 800; }
/* Recenzije su različite dužine; duge se skraćuju vizuelno, cijeli
   tekst ostaje u dokumentu. */
.sec-calm-referenzen .revcard__text {
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sec-calm-referenzen .revnote {
  margin: var(--sp-4) auto 0;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-align: center;
}

/* ---------- 7. traka sa brojkama ---------- */

.sec-calm-parallax .plx { background: var(--c-primary-dk); }
/* veo je u sekciji tvrdo upisan u plavo — ovdje ide boja brenda */
.sec-calm-parallax .plx__veil {
  background:
    radial-gradient(70% 90% at 50% 45%, rgba(31, 52, 20, 0.5), rgba(24, 40, 15, 0.78)),
    linear-gradient(180deg, rgba(31, 52, 20, 0.6), rgba(22, 38, 14, 0.82));
}
.sec-calm-parallax .plx__eyebrow {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  font-weight: 800;
}
.sec-calm-parallax .plx__title { max-width: 18ch; }
.sec-calm-parallax .plx__stats {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-xl);
}
.sec-calm-parallax .plx__num { font-weight: 800; color: #fff; }
.sec-calm-parallax .plx__label { color: rgba(255, 255, 255, 0.8); }
.sec-calm-parallax .plx__cta {
  --btn-bg: #fff;
  --btn-fg: var(--c-primary-dk);
  font-weight: 800;
}

/* ---------- 8. o nama ---------- */

.sec-housecall-about .abt { background: var(--c-bg); }
.sec-housecall-about .u-label { font-weight: 800; }
.sec-housecall-about .abt__copy h2::after { background: var(--c-accent); width: 64px; height: 4px; border-radius: 2px; }

.sec-housecall-about .abt__facts {
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.sec-housecall-about .abt__facts li { background: var(--c-white); padding: 16px 18px; }
.sec-housecall-about .abt__facts strong { color: var(--c-primary-dk); font-weight: 800; font-size: 1.25rem; }

/* Okvir prati omjer fotografije (1538×1538) — niko ne izlazi iz kadra. */
.sec-housecall-about .abt__media :is(img, video) {
  aspect-ratio: 1 / 1;
  object-position: center 42%;
  border-radius: var(--r-card-lg);
  box-shadow: var(--sh-md);
}
.sec-housecall-about .abt__media figcaption {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* ---------- 9. prije i poslije ---------- */

.sec-bloom-results .ba { background: var(--c-bg-alt); }
.sec-bloom-results .u-label { font-weight: 800; }
.sec-bloom-results .u-label::before { background: var(--c-accent); }

.sec-bloom-results .batab {
  background: var(--c-white);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  font-weight: 700;
}
.sec-bloom-results .batab:hover { border-color: var(--c-accent-dk); background: var(--c-accent-soft); }
.sec-bloom-results .batab.is-on {
  background: var(--c-primary-dk);
  border-color: var(--c-primary-dk);
  color: #fff;
}

.sec-bloom-results .cmp {
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  background: var(--c-surface);
  max-width: 900px;
  margin-inline: auto;
}
.sec-bloom-results .cmp__base { aspect-ratio: 16 / 9; object-fit: cover; }
.sec-bloom-results .cmp__tag {
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-primary-dk);
  font-weight: 800;
}
.sec-bloom-results .cmp__line i::before,
.sec-bloom-results .cmp__line i::after { border-color: var(--c-primary-dk); }

.sec-bloom-results .ba__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}

/* ---------- 10. pitanja ---------- */

.sec-sonnenschein-faq {
  /* tri podloge pločica, sve iz iste porodice kao znak */
  --c-mint: #c7e39a;
  --c-mint-soft: #eef7df;
  --c-sun: #f0d572;
  --c-sun-soft: #fbf4dd;
  --c-coral: #dfc9a4;
  --c-coral-dk: #7d6234;
  --c-coral-soft: #f7f0e4;
}
.sec-sonnenschein-faq .faq { background: var(--c-bg); }
.sec-sonnenschein-faq .faq__head h2 .u-mark { --mark: var(--c-accent); }
.sec-sonnenschein-faq .qa { border-radius: var(--r-lg); box-shadow: var(--sh-xs); }
.sec-sonnenschein-faq .qa__q button { font-weight: 800; border-radius: var(--r-lg); }
.sec-sonnenschein-faq .qa__sign { background: rgba(255, 255, 255, 0.85); }
.sec-sonnenschein-faq .qa--white .qa__sign { background: var(--c-accent-soft); }
.sec-sonnenschein-faq .qa__in > p a {
  color: var(--c-accent-dk);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Sklopljeni odgovor ne smije ostati u stablu za čitač ekrana.
   Vidljivost se gasi TEK kad se sklapanje završi, inače tekst
   nestane prije nego se pločica skupi. */
.sec-sonnenschein-faq .qa__panel {
  visibility: hidden;
  transition: grid-template-rows 380ms var(--ease-out), visibility 0s linear 380ms;
}
.sec-sonnenschein-faq .qa.is-open .qa__panel {
  visibility: visible;
  transition: grid-template-rows 380ms var(--ease-out), visibility 0s;
}

/* ---------- 11. kontakt ---------- */

.sec-haven-cta .cta { background: var(--c-primary-dk); }
.sec-haven-cta .cta__rings { --ring-c: rgba(241, 246, 233, 0.1); }
.sec-haven-cta .u-label { color: var(--c-accent); font-weight: 800; }
.sec-haven-cta .cta__copy h2 { max-width: 18ch; }
.sec-haven-cta .cta__btn { font-weight: 800; }
.sec-haven-cta .u-btn--wa { --btn-bg: var(--c-whatsapp); }
.sec-haven-cta .u-btn--wa:hover { --btn-bg: var(--c-whatsapp-dk); }
.sec-haven-cta .u-btn--white { --btn-bg: #fff; --btn-fg: var(--c-primary-dk); }

/* ---------- 12. podnožje ---------- */

.sec-housecall-footer .ftr {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-line);
  padding-bottom: var(--sp-6);
}
.sec-housecall-footer .ftr__mark {
  width: 38px; height: 38px;
  padding: 3px;
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--sh-xs);
}
.sec-housecall-footer .ftr__mark img { width: 100%; height: 100%; }
.sec-housecall-footer .ftr__logo-tx strong { font-weight: 800; letter-spacing: 0.01em; }
.sec-housecall-footer .ftr__logo-tx small { letter-spacing: 0.13em; }
.sec-housecall-footer .ftr__col h3 { color: var(--c-accent-dk); font-weight: 800; }
/* Telefon i mejl su inline elementi; puna širina ih drži jedan ispod
   drugog i kad je stubac širok. */
.sec-housecall-footer .ftr__tel,
.sec-housecall-footer .ftr__mail { width: 100%; }
.sec-housecall-footer .ftr__tel { font-weight: 800; font-variant-numeric: tabular-nums; }
.sec-housecall-footer .ftr__tel:hover { color: var(--c-accent-dk); }
.sec-housecall-footer .ftr__mail:hover { color: var(--c-accent-dk); }
.sec-housecall-footer .ftr__contact address a { color: inherit; }
.sec-housecall-footer .ftr__contact address a:hover { color: var(--c-accent-dk); text-decoration: underline; }
.sec-housecall-footer .ftr__hours th { color: var(--c-ink); }
.sec-housecall-footer .ftr__links a:hover { color: var(--c-accent-dk); }
.sec-housecall-footer .ftr__top-btn { color: var(--c-accent-dk); font-weight: 700; }

.sec-housecall-footer .ftr__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.sec-housecall-footer .ftr__social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text-muted);
}
.sec-housecall-footer .ftr__social a:hover { color: var(--c-accent-dk); }
.sec-housecall-footer .ftr__social svg { width: 19px; height: 19px; flex: none; }

/* Prostor za ljepljivu traku treba samo tamo gdje trake ima. */
@media (min-width: 621px) {
  .sec-housecall-footer .ftr { padding-bottom: var(--sp-6); }
}
@media (max-width: 620px) {
  .sec-housecall-footer .ftr { padding-bottom: calc(var(--sp-5) + 88px); }
}

/* ---------- 13. sitno na telefonu ---------- */

/* Naljepnica sa ocjenom pada prva kad zaglavlju ponestane mjesta. */
@media (max-width: 1200px) {
  .sec-klar-header .head-price { display: none; }
}
@media (max-width: 900px) {
  .sec-klar-header .head-tel { display: none; }
}
@media (max-width: 620px) {
  .sec-klar-header .head-cta { display: none; }
  .sec-sightline-services .price__in { padding: 24px 20px; }
}

/* ---------- 14. otkrivanje ----------
   Osiguranje: sadržaj ne smije ostati neviden ako posmatrač ne
   okine (dugi snimci, vraćena pozicija skrola). */
@media (prefers-reduced-motion: reduce) {
  .sec-klar-header .mobile-bar,
  .sec-haven-hero .hero__media :is(img, video) { transition: none; animation: none; }
}