/* ============================================================
   Maxilla Dent — stil sajta.
   Učitava se POSLIJE svih sekcijskih stilova i poslije brend.css.

   Šta ovaj fajl radi:
   1. veže tokene svake sekcije na jednu paletu i jedan par pisama
   2. popravlja ponašanja koja sekcije nose iz svojih templata
      (ljepljivo zaglavlje, prazan pojas ispod njega, kadrovi slika)
   3. sve ostalo je izgled

   Šta NE radi: ne prepisuje raspored. Nijedno pravilo ovdje ne dira
   display, grid-template, flex-direction, order, position, top/right/
   bottom/left, align/justify ni text-align nad klasama sekcija.

   Paleta je izmjerena iz logotipa ustanove (zlatna #BD9745 na crnom
   polju). Zlatna na bijeloj podlozi ne prolazi AA za tekst, pa se
   dijeli po podlozi: #8F6419 na svijetlim sekcijama, #D6AC5A na
   tamnim.
   ============================================================ */

:root {
  --mx-paper:      #FBF8F3;
  --mx-paper-alt:  #F4EEE4;
  --mx-surface:    #F3E9D6;
  --mx-surface-2:  #F8F2E7;
  --mx-ink:        #17130E;
  --mx-ink-dk:     #0F0C08;
  --mx-text:       #241E17;
  --mx-muted:      #5F5647;
  --mx-gold:       #8F6419;
  --mx-gold-dk:    #6F4D13;
  --mx-gold-lt:    #D6AC5A;
  --mx-gold-soft:  #F6EFE1;
  --mx-on-dark:    #F4EEE3;
  --mx-on-dark-mu: rgba(244, 238, 227, 0.76);
  --mx-line:       rgba(23, 19, 14, 0.13);
  --mx-line-str:   rgba(23, 19, 14, 0.26);
  --mx-line-dark:  rgba(244, 238, 227, 0.22);
  --mx-wa:         #0E6F63;
  --mx-wa-dk:      #0A5348;

  --mx-head-h:     78px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mx-head-h) + 16px);
  background: var(--mx-paper);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--mx-paper);
  color: var(--mx-text);
  /* clip, ne hidden: hidden pravi scroll kontejner i lomi sticky */
  overflow-x: clip;
}

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

/* ============================================================
   1. JEDNA PALETA I JEDNO PISMO NA SVIH 12 SEKCIJA
   ============================================================ */

.sec-aperta-header,
.sec-fundament-hero,
.sec-calm-services,
.sec-anker-referenzen,
.sec-haven-parallax,
.sec-calm-about,
.sec-atelier-team,
.sec-meridian-results,
.sec-sonnenschein-instagram,
.sec-anker-faq,
.sec-calm-cta,
.sec-bloom-footer {
  /* ---- pismo: Nunito za naslove (opšta praksa), Inter za tekst ---- */
  --ff-display: "Nunito Variable", "Nunito", "Segoe UI", system-ui, sans-serif;
  --ff-body:    "Inter Variable", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ---- boje ---- */
  --c-bg:            var(--mx-paper);
  --c-bg-alt:        var(--mx-paper-alt);
  --c-white:         #FFFFFF;
  --c-surface:       var(--mx-surface);
  --c-surface-soft:  var(--mx-surface-2);
  --c-surface-warm:  var(--mx-surface-2);

  --c-ink:           var(--mx-ink);
  --c-ink-soft:      #2A2219;
  --c-ink-70:        rgba(23, 19, 14, 0.70);
  --c-ink-12:        rgba(23, 19, 14, 0.12);
  --c-ink-06:        rgba(23, 19, 14, 0.06);

  --c-text:          var(--mx-text);
  --c-text-muted:    var(--mx-muted);
  --c-text-invert:   var(--mx-on-dark);
  --c-on-dark:       var(--mx-on-dark);
  --c-on-dark-mu:    var(--mx-on-dark-mu);

  --c-line:          var(--mx-line);
  --c-line-strong:   var(--mx-line-str);
  --c-line-dark:     var(--mx-line-dark);
  --c-line-invert:   var(--mx-line-dark);
  --c-border:        var(--mx-line);
  --c-border-strong: var(--mx-line-str);

  /* brend.css ne veže akcent u svakoj sekciji — vežemo ga ovdje za sve */
  --c-accent:        var(--mx-gold);
  --c-accent-dk:     var(--mx-gold-dk);
  --c-accent-lt:     var(--mx-gold-lt);
  --c-accent-soft:   var(--mx-gold-soft);
  --c-accent-tint:   var(--mx-gold-soft);
  --c-gold:          var(--mx-gold);
  --c-gold-dk:       var(--mx-gold-dk);
  --c-gold-soft:     var(--mx-gold-soft);

  --c-whatsapp:      var(--mx-wa);
  --c-whatsapp-dk:   var(--mx-wa-dk);
  --c-whatsapp-vivid: #12A87A;
  --c-star:          var(--mx-gold);

  /* ---- tipografska skala ---- */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  --fs-h4:   clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  --fs-h3:   clamp(1.25rem, 0.75vw + 1.05rem, 1.5625rem);
  --fs-h2:   clamp(1.6875rem, 1.9vw + 1.2rem, 2.4375rem);
  --fs-h1:   clamp(2rem, 2.9vw + 1.25rem, 3.25rem);

  --lh-tight: 1.1;
  --lh-snug:  1.22;
  --lh-body:  1.62;
  --ls-tight: -0.02em;
  --ls-label:  0.14em;

  /* ---- zaobljenja i sjenke ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 34px;
  --r-pill: 999px;
  --r-circle: 50%;
  --r-gallery: 16px;
  --r-img: 20px;

  --sh-xs: 0 1px 2px rgba(23, 19, 14, 0.06);
  --sh-sm: 0 4px 16px -10px rgba(23, 19, 14, 0.20);
  --sh-md: 0 16px 34px -20px rgba(23, 19, 14, 0.26);
  --sh-lg: 0 28px 56px -26px rgba(23, 19, 14, 0.32);
  --sh-xl: 0 44px 88px -34px rgba(23, 19, 14, 0.36);

  /* ---- ritam ---- */
  --section-y: clamp(60px, 7.5vw, 104px);
  --gutter:    clamp(20px, 5vw, 44px);
  --maxw:      1160px;
}

/* Naslovi: Nunito nosi malo veću težinu nego serif templati. */
.sec-aperta-header h1, .sec-aperta-header h2, .sec-aperta-header h3,
.sec-fundament-hero h1, .sec-fundament-hero h2, .sec-fundament-hero h3,
.sec-calm-services h2, .sec-calm-services h3,
.sec-anker-referenzen h2, .sec-anker-referenzen h3,
.sec-haven-parallax h2, .sec-haven-parallax h3,
.sec-calm-about h2, .sec-calm-about h3,
.sec-atelier-team h2, .sec-atelier-team h3,
.sec-meridian-results h2, .sec-meridian-results h3,
.sec-sonnenschein-instagram h2, .sec-sonnenschein-instagram h3,
.sec-anker-faq h2, .sec-anker-faq h3,
.sec-calm-cta h2,
.sec-bloom-footer h3 {
  font-weight: 800;
  letter-spacing: var(--ls-tight);
}

/* ============================================================
   2. TAMNE SEKCIJE — zlatna se posvjetljava
   Na crnom polju logotipa zlatna je 6,8 : 1; na bijeloj 2,7 : 1.
   ============================================================ */

.sec-haven-parallax,
.sec-bloom-footer {
  --c-accent:      var(--mx-gold-lt);
  --c-accent-dk:   #C09340;
  --c-accent-lt:   #E7C783;
  --c-accent-tint: rgba(214, 172, 90, 0.22);
  --c-star:        var(--mx-gold-lt);
}

/* ============================================================
   3. TRAKE SASTAVLJAČA
   ============================================================ */

.band { position: relative; }
.band-odd  { background: var(--mx-paper); }
.band-even { background: var(--mx-paper-alt); }

/* Zaglavlje je `position: sticky`, ali mu je roditelj sekcija visoka
   koliko i traka — sticky se drži njenog okvira i otklizi. Ljepljivost
   se zato prebacuje na traku sastavljača, koja traje kroz cijelu stranu. */
.band[data-band="1"] {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
}

/* Podnožje sámo boji svoju plohu — traka ispod njega ne smije biti bijela. */
.band[data-band="12"] { background: var(--mx-ink-dk); }

/* Traka sa pozivom i WhatsAppom stoji preko dna na telefonu:
   posljednja traka joj ostavlja mjesto (podnožje već ima svoj razmak). */

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

.sec-aperta-header .site-head {
  background: rgba(251, 248, 243, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.sec-aperta-header .site-head.is-stuck {
  background: rgba(251, 248, 243, 0.95);
  border-bottom-color: var(--mx-line);
  box-shadow: 0 10px 30px -24px rgba(23, 19, 14, 0.6);
}
.sec-aperta-header { --header-h: var(--mx-head-h); }

.sec-aperta-header .brand__mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
}
.sec-aperta-header .brand__img { width: 100%; height: auto; object-fit: contain; }
.sec-aperta-header .brand__tx strong {
  font-family: var(--ff-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--mx-ink);
}
.sec-aperta-header .brand__tx small {
  color: var(--mx-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}
.sec-aperta-header .site-nav a { font-family: var(--ff-body); font-weight: 600; }
.sec-aperta-header .head-cta { --btn-bg: var(--mx-ink); --btn-fg: #fff; }
.sec-aperta-header .head-cta:hover { --btn-bg: var(--mx-gold-dk); }
.sec-aperta-header .menu { background: var(--mx-paper); }
.sec-aperta-header .menu a { font-family: var(--ff-display); font-weight: 700; }
.sec-aperta-header .menu li:last-child a { color: var(--mx-gold-dk); }

/* Skripta traku pušta tek poslije 400 px skrola — a u njoj je jedini
   WhatsApp koji stoji stalno. `transform` nije zaključano svojstvo. */
.sec-aperta-header .mobile-bar { transform: translateY(0); }
.sec-aperta-header .mobile-bar__i {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.sec-aperta-header .mobile-bar__i--call { background: var(--mx-ink); color: #fff; }
.sec-aperta-header .mobile-bar__i--wa { background: var(--mx-wa); color: #fff; }

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

/* Zaglavlje je U TOKU (ljepljiva traka), pa hero ne smije čuvati
   mjesto za njega — inače ostaje prazan pojas visine zaglavlja.
   Isto vrijedi za bočnu traku koje u ovom rasporedu nema. */
.sec-fundament-hero { --header-h: 0px; --rail-w: 0px; }

.sec-fundament-hero .hero { background: var(--mx-paper); }

/* Hero staje u JEDAN ekran: templatovih `84vh` uz ljepljivo zaglavlje
   znači da se mora skrolati da bi se hero vidio do kraja. Ovdje visina
   ide na „ekran minus zaglavlje", sa donjom i gornjom granicom da ne
   ispadne ni zbijeno na niskom ni razvučeno na vrlo visokom ekranu.
   `min-height` nije zaključano svojstvo — ako tekst zatraži više, hero
   naraste. */
@media (min-width: 901px) {
  .sec-fundament-hero .hero {
    min-height: clamp(520px, calc(100svh - var(--mx-head-h)), 820px);
  }
  /* Slika je uspravna (640 × 826) i sa `height: 100%` u redu automatske
     visine pada na svoju stvarnu visinu — na 1920 px to je 1229 px i baš
     ona razvlači hero preko ekrana. Zadata visina to zaustavlja. */
  .sec-fundament-hero .hero__media {
    height: clamp(520px, calc(100svh - var(--mx-head-h)), 820px);
  }
  /* Sadržaj se drži ispod te mjere: naslov u dva reda, uži razmaci. */
  .sec-fundament-hero .hero h1 {
    font-size: clamp(2.375rem, 2.5vw + 1.5rem, 3.75rem);
    max-width: 21ch;
  }
  .sec-fundament-hero .hero__lead { font-size: 1.125rem; max-width: 44ch; }
  .sec-fundament-hero .hero__copy-in > * + * { margin-top: 20px; }
  .sec-fundament-hero .hero__facts {
    margin-top: 30px !important;
    padding-top: 18px;
  }
}
.sec-fundament-hero .hero__copy { padding-block: clamp(28px, 3.2vw, 48px) clamp(28px, 3.2vw, 46px); }
.sec-fundament-hero .hero h1 { color: var(--mx-ink); font-weight: 800; }
.sec-fundament-hero .hero__lead { color: var(--mx-muted); }

.sec-fundament-hero .u-label {
  color: var(--mx-gold-dk);
  letter-spacing: var(--ls-label);
  font-weight: 700;
}

/* Ikona u dugmetu: ova sekcija ne ograničava svg unutar .u-btn. */
.sec-fundament-hero .u-btn svg { width: 20px; height: 20px; flex: none; }

.sec-fundament-hero .u-btn--solid { --btn-bg: var(--mx-wa); --btn-fg: #fff; }
.sec-fundament-hero .u-btn--solid:hover { --btn-bg: var(--mx-wa-dk); }
.sec-fundament-hero .u-btn--line { --btn-fg: var(--mx-ink); --btn-bd: var(--mx-line-str); }
.sec-fundament-hero .u-btn--line:hover { --btn-bd: var(--mx-gold); --btn-fg: var(--mx-gold-dk); }

.sec-fundament-hero .hero__facts { border-top-color: var(--mx-line); }
.sec-fundament-hero .hero__facts strong { color: var(--mx-ink); font-weight: 800; }
.sec-fundament-hero .hero__facts span { color: var(--mx-muted); }

.sec-fundament-hero .hero__rating { gap: 8px; color: var(--mx-muted); }
.sec-fundament-hero .hero__pin { width: 18px; height: 18px; color: var(--mx-gold-dk); flex: none; }
.sec-fundament-hero .hero__pin svg { width: 100%; height: 100%; }
.sec-fundament-hero .hero__rating a { color: inherit; border-bottom: 1px solid var(--mx-line-str); }
.sec-fundament-hero .hero__rating a:hover { color: var(--mx-gold-dk); border-bottom-color: var(--mx-gold); }
.sec-fundament-hero .hero__rating strong { color: var(--mx-text); }

/* Uspravna fotografija (640 × 826) u širokom okviru pokazuje samo traku
   iz sredine — lice ostaje iznad kadra. Kadar se zato veže za vrh. */
.sec-fundament-hero .hero__media { background: var(--mx-surface); }
.sec-fundament-hero .hero__media :is(img, video) { object-position: 50% 12%; }

@media (max-width: 900px) {
  /* Telefon: slika je vlastiti blok, tekst ide ispod nje, bez zatamnjenja.
     5:4 drži naslov i prvo dugme iznad pregiba. */
  .sec-fundament-hero .hero__media { aspect-ratio: 4 / 3; }
  .sec-fundament-hero .hero__copy { padding-top: clamp(26px, 5vw, 40px); }
}
@media (max-width: 560px) {
  .sec-fundament-hero .hero__media { aspect-ratio: 4 / 3; }
  .sec-fundament-hero .hero h1 { font-size: clamp(1.875rem, 7.4vw, 2.375rem); }
  .sec-fundament-hero .hero__lead { font-size: 1.0625rem; }
  .sec-fundament-hero .hero__facts { gap: 12px; }
}
/* Nizak telefon (375 × 667): ljepljiva traka pada preko prvog dugmeta.
   Sve se skuplja taman toliko da naslov i glavno dugme ostanu iznad nje. */
@media (max-width: 640px) and (max-height: 780px) {
  .sec-fundament-hero .hero__media { aspect-ratio: 16 / 10; }
  .sec-fundament-hero .hero__copy { padding-block: 18px 32px; }
  .sec-fundament-hero .hero__copy-in > * + * { margin-top: 14px; }
  .sec-fundament-hero .hero__copy-in .hero__facts { margin-top: 26px !important; }
  .sec-fundament-hero .hero h1 { font-size: 1.625rem; }
  .sec-fundament-hero .hero__lead { font-size: 0.9375rem; }
  .sec-fundament-hero .u-label { font-size: 0.6875rem; letter-spacing: 0.1em; }
}

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

.sec-calm-services .svcs { background: var(--mx-paper); }
.sec-calm-services .u-eyebrow { color: var(--mx-gold-dk); letter-spacing: var(--ls-label); font-weight: 700; }
.sec-calm-services .svcs__intro { color: var(--mx-muted); }

.sec-calm-services .svc {
  background: #fff;
  border: 1px solid var(--mx-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.sec-calm-services .svc:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--mx-gold-lt);
}
.sec-calm-services .svc__icon {
  background: var(--mx-gold-soft);
  color: var(--mx-gold-dk);
  border-radius: var(--r-lg);
}
.sec-calm-services .svc h3 { font-size: var(--fs-h4); }
.sec-calm-services .svc h3 a { color: var(--mx-ink); }
.sec-calm-services .svc p { color: var(--mx-muted); }
.sec-calm-services .svc__link { color: var(--mx-gold-dk); font-weight: 700; }

.sec-calm-services .svc--accent {
  background: var(--mx-ink);
  border-color: var(--mx-ink);
}
.sec-calm-services .svc--accent h3 a,
.sec-calm-services .svc--accent h3 { color: var(--mx-on-dark); }
.sec-calm-services .svc--accent p { color: var(--mx-on-dark-mu); }
.sec-calm-services .svc--accent .svc__icon { background: rgba(214, 172, 90, 0.18); color: var(--mx-gold-lt); }
.sec-calm-services .svc--accent .svc__link { color: var(--mx-gold-lt); }

/* ============================================================
   7. OBJAVE I OCJENE
   ============================================================ */

.sec-anker-referenzen .rev { background: var(--mx-paper-alt); }
.sec-anker-referenzen .u-label { color: var(--mx-gold-dk); font-weight: 700; letter-spacing: var(--ls-label); }
.sec-anker-referenzen .u-label--jade { color: var(--mx-gold-dk); }
.sec-anker-referenzen .u-head p { color: var(--mx-muted); }

.sec-anker-referenzen .gsum {
  background: #fff;
  border: 1px solid var(--mx-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.sec-anker-referenzen .gsum__score strong { color: var(--mx-ink); font-weight: 800; }
.sec-anker-referenzen .gsum__link { color: var(--mx-gold-dk); font-weight: 700; }

.sec-anker-referenzen .rcard {
  background: #fff;
  border: 1px solid var(--mx-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
}
.sec-anker-referenzen .rcard__tr p { color: var(--mx-text); }
.sec-anker-referenzen .rcard__who { color: var(--mx-ink); font-weight: 700; }
.sec-anker-referenzen .rcard__src { color: var(--mx-muted); }
/* Sve tri pilule iste i pune — providna se čitala kao greška. */
.sec-anker-referenzen .u-tab {
  background: var(--mx-ink);
  color: #fff;
  border: 0;
}

/* Ispod 780 px sekcija stiska sadržaj u dvije uske kolone —
   `container-type` daje tačnu širinu roditelja bez 100vw. */
@media (max-width: 780px) {
  .sec-anker-referenzen .rev__top { container-type: inline-size; }
}

/* ============================================================
   8. KAKO DO TERMINA (video u pozadini)
   ============================================================ */

.sec-haven-parallax .scrub { background: var(--mx-paper); }
.sec-haven-parallax .scrub__frame { background: var(--mx-ink-dk); }

/* Zatamnjenje templata je tvrdo upisana zelena i guta fotografiju.
   Ovdje ide boja brenda, i taman toliko da tekst bude čitljiv. */
.sec-haven-parallax .scrub__veil {
  background:
    linear-gradient(to right, rgba(15, 12, 8, 0.90) 0%, rgba(15, 12, 8, 0.72) 48%, rgba(15, 12, 8, 0.38) 100%),
    linear-gradient(to top, rgba(15, 12, 8, 0.55), transparent 52%);
}
@media (max-width: 900px) {
  /* U uskom okviru `cover` pokaže samo sredinu snimka — a natpis
     ambulante je desno od nje. Kadar se zato pomjera udesno. */
  .sec-haven-parallax .scrub__media :is(img, video) { object-position: 72% 50%; }
  .sec-haven-parallax .scrub__veil {
    background: linear-gradient(to top, rgba(15, 12, 8, 0.88) 0%, rgba(15, 12, 8, 0.72) 56%, rgba(15, 12, 8, 0.30) 100%);
  }
}

.sec-haven-parallax .u-label { color: var(--mx-gold-lt); font-weight: 700; letter-spacing: var(--ls-label); }
.sec-haven-parallax .scrub__head h2 { color: var(--mx-on-dark); font-weight: 800; }
.sec-haven-parallax .step h3 { color: var(--mx-on-dark); }
.sec-haven-parallax .step p { color: var(--mx-on-dark-mu); }
/* Krug je pun zlatnom — broj u njemu mora biti taman, ne zlatan. */
.sec-haven-parallax .step__n {
  background: var(--mx-gold-lt);
  color: var(--mx-ink);
  font-family: var(--ff-display);
  font-weight: 800;
}

/* ============================================================
   9. O NAMA
   ============================================================ */

.sec-calm-about .abt { background: var(--mx-paper-alt); }
.sec-calm-about .u-eyebrow { color: var(--mx-gold-dk); font-weight: 700; letter-spacing: var(--ls-label); }
.sec-calm-about .abt__lead { color: var(--mx-text); }
.sec-calm-about .abt__points li span { color: var(--mx-muted); }
.sec-calm-about .abt__points strong { color: var(--mx-ink); }
.sec-calm-about .abt__tick { background: var(--mx-gold); }
.sec-calm-about .u-arc { --arc-c: var(--mx-gold); }

/* Uspravna fotografija ordinacije, i veća: razmak između stubaca i
   unutrašnji padding kolone su smanjeni da slika dobije više mjesta. */
.sec-calm-about .abt__inner { gap: clamp(36px, 4.5vw, 76px); }
.sec-calm-about .abt__media { padding-left: 22px; padding-bottom: 42px; }
.sec-calm-about .abt__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-2xl) var(--r-2xl) var(--r-2xl) 84px;
  box-shadow: var(--sh-lg);
}
.sec-calm-about .abt__photo :is(img, video) { object-position: 50% 66%; }
.sec-calm-about .abt__portrait {
  width: clamp(124px, 16vw, 168px);
  background: #fff;
  border-color: var(--mx-paper-alt);
}
.sec-calm-about .abt__portrait :is(img, video) { object-fit: contain; padding: 12px; }

.sec-calm-about .abt__badge {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--mx-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.sec-calm-about .abt__badge-icon { color: var(--mx-gold-dk); }
.sec-calm-about .abt__badge-text strong { color: var(--mx-ink); }
.sec-calm-about .abt__badge-text small { color: var(--mx-muted); }

.sec-calm-about .abt__sign-name { font-family: var(--ff-display); font-weight: 800; color: var(--mx-ink); }
.sec-calm-about .abt__sign-role { color: var(--mx-muted); }

.sec-calm-about .u-btn--primary { --btn-bg: var(--mx-ink); --btn-fg: #fff; }
.sec-calm-about .u-btn--primary:hover { --btn-bg: var(--mx-gold-dk); }
.sec-calm-about .u-btn--ghost { --btn-fg: var(--mx-ink); --btn-bd: var(--mx-line-str); }
.sec-calm-about .u-btn--ghost:hover { --btn-bd: var(--mx-gold); --btn-fg: var(--mx-gold-dk); }

@media (max-width: 860px) {
  .sec-calm-about .abt__photo { aspect-ratio: 4 / 5; border-radius: var(--r-xl) var(--r-xl) var(--r-xl) 64px; }
  .sec-calm-about .abt__media { max-width: 420px; }
  /* Medaljon na uskom ekranu pokriva previše fotografije. */
  .sec-calm-about .abt__portrait { width: 106px; }
}

/* ============================================================
   10. TIM
   ============================================================ */

.sec-atelier-team .solo { background: var(--mx-paper); }
.sec-atelier-team .u-marker { color: var(--mx-gold-dk); font-weight: 700; letter-spacing: var(--ls-label); }
.sec-atelier-team .solo__head p { color: var(--mx-muted); }
.sec-atelier-team .u-em { color: var(--mx-gold-dk); font-style: normal; }

/* Portret 640 × 826 — okvir dobija omjer same fotografije. */
.sec-atelier-team .solo__frame {
  aspect-ratio: 640 / 826;
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-lg);
  background: var(--mx-surface);
}
.sec-atelier-team .solo__frame :is(img, video) { object-position: 50% 18%; }
.sec-atelier-team .solo__figure figcaption { color: var(--mx-muted); }

.sec-atelier-team .solo__values li h3 { color: var(--mx-ink); font-size: var(--fs-h4); }
.sec-atelier-team .solo__values li p { color: var(--mx-muted); }
.sec-atelier-team .solo__v-no {
  color: var(--mx-gold-dk);
  font-family: var(--ff-display);
  font-weight: 800;
}

@media (max-width: 620px) {
  .sec-atelier-team .solo__frame { aspect-ratio: 640 / 826; max-width: 340px; margin-inline: auto; }
}

/* ============================================================
   11. PRIJE I POSLIJE
   ============================================================ */

.sec-meridian-results .res { background: var(--mx-paper-alt); }
.sec-meridian-results .u-label { color: var(--mx-gold-dk); font-weight: 700; letter-spacing: var(--ls-label); }
.sec-meridian-results .res__head p { color: var(--mx-muted); }

/* Fotografije su 900 × 491 — u okviru 4:3 bi im ostala samo sredina. */
.sec-meridian-results .cmp {
  aspect-ratio: 900 / 491;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  background: var(--mx-surface);
}
.sec-meridian-results .cmp__tag--b { background: rgba(255, 255, 255, 0.94); color: var(--mx-ink); }
.sec-meridian-results .cmp__tag--a { background: var(--mx-gold); color: #fff; }
.sec-meridian-results .cmp__grip { background: #fff; color: var(--mx-ink); }
.sec-meridian-results .case__body h3 { color: var(--mx-ink); font-size: var(--fs-h4); }
.sec-meridian-results .case__body p { color: var(--mx-muted); }

/* ============================================================
   12. INSTAGRAM
   ============================================================ */

.sec-sonnenschein-instagram {
  --c-coral:      var(--mx-gold);
  --c-coral-dk:   var(--mx-gold-dk);
  --c-coral-soft: var(--mx-gold-soft);
  --c-sun:        #E3C67F;
  --c-sun-soft:   #F9F2E3;
  --c-mint:       #D9CDB6;
  --c-mint-soft:  var(--mx-surface-2);
}
.sec-sonnenschein-instagram .ig { background: var(--mx-paper); }
.sec-sonnenschein-instagram .u-chip { background: var(--mx-gold-soft); color: var(--mx-gold-dk); }
.sec-sonnenschein-instagram .ig__head p { color: var(--mx-muted); }
.sec-sonnenschein-instagram .ig__head h2 .u-mark { --mark: var(--mx-gold-lt); }

.sec-sonnenschein-instagram .ig__profile {
  background: #fff;
  border: 1px solid var(--mx-line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-xs);
}
.sec-sonnenschein-instagram .ig__profile-ic { color: var(--mx-gold-dk); }
.sec-sonnenschein-instagram .ig__profile-txt strong { color: var(--mx-ink); }
.sec-sonnenschein-instagram .ig__profile-txt small { color: var(--mx-muted); }

.sec-sonnenschein-instagram .reel { border-radius: var(--r-gallery); }
/* Objave su 3:4 i kvadratne — u okviru 9:16 im se odsijeku ivice
   sa natpisima. 4:5 je najbliži okvir koji ih pusti da se vide. */
.sec-sonnenschein-instagram .reel__link {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-gallery);
  box-shadow: var(--sh-sm);
}
.sec-sonnenschein-instagram .reel__play { background: var(--mx-gold-lt); color: var(--mx-ink); }
.sec-sonnenschein-instagram .ig__arrow {
  background: #fff;
  border: 1px solid var(--mx-line-str);
  color: var(--mx-ink);
}
.sec-sonnenschein-instagram .ig__arrow:disabled { opacity: 0.4; }
.sec-sonnenschein-instagram .u-btn--line { --btn-fg: var(--mx-ink); --btn-bd: var(--mx-line-str); }
.sec-sonnenschein-instagram .u-btn--line:hover { --btn-bd: var(--mx-gold); --btn-fg: var(--mx-gold-dk); }

/* ============================================================
   13. ČESTA PITANJA
   ============================================================ */

.sec-anker-faq .faq { background: var(--mx-paper-alt); }
.sec-anker-faq .u-label { color: var(--mx-gold-dk); font-weight: 700; letter-spacing: var(--ls-label); }
.sec-anker-faq .faq__head p { color: var(--mx-muted); }

/* Spisak je u templatu 56rem u kontejneru od 1160 px i lijepo poravnat,
   pa desno ostaje prazan pojas. Cijeli stubac ide na sredinu — naslov,
   pitanja i završni red na istoj širini i istim marginama. */
.sec-anker-faq .faq__head,
.sec-anker-faq .faq__list,
.sec-anker-faq .faq__more {
  max-width: 56rem;
  margin-inline: auto;
}
/* Templat je ravan spisak sa hairline crtama i dugmetom bez bočnog
   paddinga. Kad se od svake stavke napravi bijela kartica, taj padding
   fali: tekst i znak sjedaju na samu ivicu, kartice se dodiruju pa im
   se zaobljeni uglovi vide kao urezi, a crta iznad prve ostaje visiti.
   Zato: razmak između kartica, uvlaka unutar njih, i bez crte na vrhu. */
.sec-anker-faq .faq__list {
  gap: 10px;
  border-top: 0;
}
.sec-anker-faq .qa {
  background: #fff;
  border: 1px solid var(--mx-line);
  border-bottom: 1px solid var(--mx-line);
  border-radius: var(--r-lg);
  padding-inline: 26px;
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.sec-anker-faq .qa:hover { border-color: var(--mx-line-str); }
.sec-anker-faq .qa.is-open {
  border-color: var(--mx-gold-lt);
  box-shadow: var(--sh-sm);
}
.sec-anker-faq .qa__q button { padding-block: 20px; }
.sec-anker-faq .qa__in p { padding-bottom: 22px; }

@media (max-width: 620px) {
  .sec-anker-faq .qa { padding-inline: 18px; }
  .sec-anker-faq .faq__list { gap: 8px; }
}
.sec-anker-faq .qa__t { color: var(--mx-ink); font-family: var(--ff-display); font-weight: 700; }
.sec-anker-faq .qa__in p { color: var(--mx-muted); }
.sec-anker-faq .qa__in a { color: var(--mx-gold-dk); text-decoration: underline; text-underline-offset: 3px; }
.sec-anker-faq .qa__sign { color: var(--mx-gold-dk); }
.sec-anker-faq .faq__more { color: var(--mx-muted); }
.sec-anker-faq .faq__more a { color: var(--mx-gold-dk); font-weight: 700; }

/* ============================================================
   14. KONTAKT
   ============================================================ */

.sec-calm-cta .cta { background: var(--mx-paper); }
.sec-calm-cta .cta__card {
  background: var(--mx-ink);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-xl);
}
.sec-calm-cta .cta__eyebrow { color: var(--mx-gold-lt); font-weight: 700; letter-spacing: var(--ls-label); }
.sec-calm-cta .cta__copy h2 { color: var(--mx-on-dark); font-weight: 800; }
.sec-calm-cta .cta__copy p { color: var(--mx-on-dark-mu); }
.sec-calm-cta .cta__blob { background: rgba(214, 172, 90, 0.14); }

.sec-calm-cta .ctabtn {
  border-radius: var(--r-lg);
  border: 1px solid transparent;
}
/* Strelica u templatu ima svijetlu podlogu — na tamnoj kartici je to
   bijeli krug veći od same strelice. */
.sec-calm-cta .ctabtn__arrow {
  width: 26px; height: 26px;
  background: rgba(244, 238, 227, 0.16);
  color: currentColor;
}
.sec-calm-cta .ctabtn:hover .ctabtn__arrow { background: rgba(244, 238, 227, 0.3); }
.sec-calm-cta .ctabtn--wa .ctabtn__arrow { background: rgba(255, 255, 255, 0.2); }
.sec-calm-cta .ctabtn--wa:hover .ctabtn__arrow { background: rgba(255, 255, 255, 0.32); }
.sec-calm-cta .ctabtn--wa { background: var(--mx-wa); color: #fff; }
.sec-calm-cta .ctabtn--wa:hover { background: var(--mx-wa-dk); }
.sec-calm-cta .ctabtn--wa .ctabtn__icon,
.sec-calm-cta .ctabtn--wa .ctabtn__text strong,
.sec-calm-cta .ctabtn--wa .ctabtn__text small,
.sec-calm-cta .ctabtn--wa .ctabtn__arrow { color: #fff; }
.sec-calm-cta .ctabtn--wa .ctabtn__text small { color: rgba(255, 255, 255, 0.86); }

.sec-calm-cta .ctabtn--tel {
  background: rgba(244, 238, 227, 0.08);
  border-color: var(--mx-line-dark);
  color: var(--mx-on-dark);
}
.sec-calm-cta .ctabtn--tel:hover { background: rgba(244, 238, 227, 0.16); border-color: var(--mx-gold-lt); }
.sec-calm-cta .ctabtn--tel .ctabtn__icon { color: var(--mx-gold-lt); }
.sec-calm-cta .ctabtn--tel .ctabtn__text strong { color: var(--mx-on-dark); }
.sec-calm-cta .ctabtn--tel .ctabtn__text small { color: var(--mx-on-dark-mu); }

.sec-calm-cta .cta__note { color: var(--mx-on-dark-mu); }
.sec-calm-cta .cta__note svg { color: var(--mx-gold-lt); }

/* ============================================================
   15. PODNOŽJE
   ============================================================ */

.sec-bloom-footer .ftr { background: var(--mx-ink-dk); }
.sec-bloom-footer .ftr__mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
}
.sec-bloom-footer .ftr__mark img { width: 100%; height: auto; object-fit: contain; }
.sec-bloom-footer .ftr__logo-tx strong { font-family: var(--ff-display); font-weight: 800; color: var(--mx-on-dark); }
.sec-bloom-footer .ftr__logo-tx small { color: var(--mx-on-dark-mu); }
.sec-bloom-footer .ftr__blurb { color: var(--mx-on-dark-mu); }
.sec-bloom-footer .ftr__col h3 { color: var(--mx-gold-lt); letter-spacing: var(--ls-label); }
.sec-bloom-footer .ftr__col li a { color: var(--mx-on-dark-mu); }
.sec-bloom-footer .ftr__col li a:hover { color: var(--mx-gold-lt); }
.sec-bloom-footer .ftr__social a {
  border: 1px solid var(--mx-line-dark);
  color: var(--mx-on-dark);
  border-radius: var(--r-circle);
}
.sec-bloom-footer .ftr__social a:hover { border-color: var(--mx-gold-lt); }
.sec-bloom-footer .ftr__contact address { color: var(--mx-on-dark-mu); font-style: normal; }
.sec-bloom-footer .ftr__mail { color: var(--mx-on-dark); border-bottom: 1px solid var(--mx-line-dark); }
.sec-bloom-footer .ftr__mail:hover { color: var(--mx-gold-lt); border-bottom-color: var(--mx-gold-lt); }
.sec-bloom-footer .ftr__hours th { color: var(--mx-on-dark-mu); font-weight: 600; }
.sec-bloom-footer .ftr__hours td { color: var(--mx-on-dark); }
.sec-bloom-footer .ftr__map {
  border: 1px solid var(--mx-line-dark);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.sec-bloom-footer .ftr__map-tx strong { color: var(--mx-on-dark); }
.sec-bloom-footer .ftr__map-go { color: var(--mx-gold-lt); font-weight: 700; }
.sec-bloom-footer .ftr__bar { border-top: 1px solid var(--mx-line-dark); }
.sec-bloom-footer .ftr__bar p { color: var(--mx-on-dark-mu); }
.sec-bloom-footer .ftr__top { color: var(--mx-on-dark); }
.sec-bloom-footer .ftr__top:hover { color: var(--mx-gold-lt); }

/* ============================================================
   16. OTKRIVANJE PRI SKROLU
   Sekcijski runtime radi kroz IntersectionObserver. Skripta sajta
   ima i mrežu na `scroll`, a ovdje stoji stanje bez animacije za
   one koji je ne žele.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .has-js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}