/* ============================================================
   Dental Pixel — sloj ujednačavanja.
   Učitava se POSLIJE svih `section.css` i `brend.css`, pa ih po
   redoslijedu nadjačava. Nijedan `section.css` nije diran.

   Šta ovaj fajl radi:
     1. jedno pismo na cijelom sajtu (Nunito naslovi, Inter tekst)
     2. jedan neutralni set boja umjesto dvanaest templatskih
     3. jedan ritam — ista širina, isti razmak, isti radijus, ista sjenka
     4. telefon prvo: hero se skraćuje, tekst silazi ispod slike

   Šta NE dira (raspored je u `section.css`):
     display, grid-template-*, grid-area, flex-direction, order,
     position, top/right/bottom/left, align-*, justify-*, text-align
   ============================================================ */

/* ============================================================
   1. TOKENI — jedan set za svih dvanaest sekcija
   ============================================================ */

.sec-haven-header,
.sec-atelier-hero,
.sec-sightline-services,
.sec-calm-referenzen,
.sec-calm-parallax,
.sec-aperta-about,
.sec-atelier-team,
.sec-rowan-results,
.sec-fundament-instagram,
.sec-calm-faq,
.sec-aperta-cta,
.sec-terra-footer {

  /* ---------- pismo ----------
     Nunito za naslove: opšta praksa, ne estetska (UPUTA.md).
     Inter za tekst: bez izbora, bira se po čitljivosti. */
  --ff-display: var(--font-display-rounded);
  --ff-body:    var(--font-sans);

  /* ---------- neutrali ----------
     Templati su nosili greige, krem, hladno plavu i toplu pješčanu.
     Ovdje je jedan topao neutral sa zelenkastim podtonom, da sjedne
     uz tirkiz brenda. */
  --c-bg:            #FBFAF8;
  --c-bg-alt:        #F1F4F2;
  --c-white:         #FFFFFF;
  --c-surface:       #E4EFEB;
  --c-surface-soft:  #F0F6F4;
  --c-surface-warm:  #F3F1EC;

  --c-ink:       #16241F;
  --c-ink-soft:  #1D2E28;
  --c-ink-70:    rgba(22, 36, 31, 0.70);
  --c-ink-12:    rgba(22, 36, 31, 0.12);
  --c-ink-06:    rgba(22, 36, 31, 0.06);

  --c-text:         #1D2E28;
  --c-text-muted:   #55655F;
  --c-text-invert:  #F4F7F5;
  --c-on-dark:      #F4F7F5;
  --c-on-dark-mu:   rgba(244, 247, 245, 0.76);

  --c-line:         rgba(22, 36, 31, 0.11);
  --c-line-strong:  rgba(22, 36, 31, 0.22);
  --c-line-dark:    rgba(244, 247, 245, 0.20);
  --c-line-invert:  rgba(244, 247, 245, 0.20);
  --c-border:       rgba(22, 36, 31, 0.11);
  --c-border-strong:rgba(22, 36, 31, 0.22);

  /* Tamnije od templatskog zlata: zvjezdice na bijelom moraju imati
     bar 3:1, a #C9922E ga nema. */
  --c-star:           #96690F;
  /* WhatsApp zelena, ali tamnija nijansa iz iste porodice — bijeli
     tekst na #128C7E daje 4,14:1, a na ovoj 5,1:1. */
  --c-whatsapp:       #0E7C6F;
  --c-whatsapp-dk:    #0B6357;
  --c-whatsapp-vivid: #25D366;
  --c-google-blue:    #4285F4;

  /* ---------- ritam ----------
     Ista širina i isti vertikalni razmak u svih dvanaest. */
  --maxw:       1160px;
  --maxw-narrow: 820px;
  --gutter:     clamp(20px, 5vw, 44px);
  --section-y:  clamp(56px, 8vw, 108px);
  --header-h:   72px;
  --tap:        46px;

  /* ---------- radijusi ----------
     Templati su išli od 6 px do 56 px. Jedna skala, mirna. */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-2xl: 40px;
  --r-pill: 999px;
  --r-circle: 50%;
  --r-card:    16px;
  --r-card-lg: 22px;
  --r-gallery: 14px;
  --r-img:     16px;

  /* ---------- sjenke ----------
     Jedna boja sjenke (mastilo brenda), jedna krivulja. */
  --sh-xs: 0 1px 2px rgba(22, 36, 31, 0.05);
  --sh-sm: 0 4px 14px -8px rgba(22, 36, 31, 0.18);
  --sh-md: 0 14px 32px -16px rgba(22, 36, 31, 0.24);
  --sh-lg: 0 26px 56px -22px rgba(22, 36, 31, 0.28);
  --sh-xl: 0 44px 90px -32px rgba(22, 36, 31, 0.32);

  /* ---------- tipografski ritam ---------- */
  --lh-tight: 1.1;
  --lh-snug:  1.22;
  --lh-body:  1.65;
  --ls-tight: -0.02em;
  --ls-label:  0.14em;
}

/* Naslovna skala ostaje po sekciji: hero smije biti krupniji od
   pitanja. Ujednačava se PISMO, ne skala. */
.sec-atelier-hero  { --fs-h1: clamp(2.5rem, 6vw + 0.6rem, 4.5rem); }
.sec-atelier-team  { --fs-h2: clamp(1.875rem, 2.4vw + 1.3rem, 2.875rem); }
.sec-terra-footer  { --fs-h2: clamp(1.875rem, 2.4vw + 1.3rem, 2.75rem); }
.sec-rowan-results { --fs-h2: clamp(1.875rem, 2.2vw + 1.3rem, 2.75rem); }

/* Nunito je zaobljen i optički krupniji od serifa za koji su naslovi
   crtani — pa ide malo tješnje i malo lakše. */
.sec-haven-header h1, .sec-haven-header h2, .sec-haven-header h3,
.sec-atelier-hero h1, .sec-atelier-hero h2, .sec-atelier-hero h3,
.sec-sightline-services h2, .sec-sightline-services h3,
.sec-calm-referenzen h2, .sec-calm-referenzen h3,
.sec-calm-parallax h2, .sec-calm-parallax h3,
.sec-aperta-about h2, .sec-aperta-about h3,
.sec-atelier-team h2, .sec-atelier-team h3,
.sec-rowan-results h2, .sec-rowan-results h3,
.sec-fundament-instagram h2, .sec-fundament-instagram h3,
.sec-calm-faq h2, .sec-calm-faq h3,
.sec-aperta-cta h2, .sec-aperta-cta h3,
.sec-terra-footer h2, .sec-terra-footer h3 {
  font-weight: 700;
  letter-spacing: -0.021em;
}

/* ============================================================
   2. STRANICA
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #FBFAF8;
  color: #1D2E28;
  font-family: var(--font-sans);
  overflow-x: hidden;
}

/* Zaglavlje je `position: fixed` — sidro ispod njega bi inače
   završilo pod trakom. */
[id] { scroll-margin-top: calc(var(--header-h, 72px) + 16px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Trake se smjenjuju iz sastavljača; sekcije boje same sebe, pa
   traka ostaje providna da se dvije pozadine ne slažu jedna preko
   druge. */
.band { background: transparent; }

/* Fokus je isti na cijelom sajtu. */
.sec :focus-visible,
.wa-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   3. SEKCIJE — dotjerivanje po sekciji
   ============================================================ */

/* ---------- 01 · zaglavlje ---------- */

.sec-haven-header .brand__tx strong {
  letter-spacing: -0.02em;
  font-weight: 800;
}
/* Boju NE diramo: templat je vodi kroz `currentColor`, pa se natpis sam
   prevrne kad traka pređe sa fotografije na svijetlu podlogu. */
.sec-haven-header .brand__tx small { letter-spacing: 0.1em; }

/* Zalijepljena traka u boji ove palete, ne u kremu iz templata. */
.sec-haven-header .site-head.is-stuck {
  background: rgba(251, 250, 248, 0.92);
}
/* Sve u traci stoji u JEDNOM redu. „O nama" i „066 191 117" imaju razmak
   u sebi, pa su se lomili na dva reda i traku vukli na 70 px visine. */
.sec-haven-header .site-nav a,
.sec-haven-header .head-tel,
.sec-haven-header .head-tel span,
.sec-haven-header .head-cta,
.sec-haven-header .brand__tx strong,
.sec-haven-header .brand__tx small {
  white-space: nowrap;
}
.sec-haven-header .site-nav ul { flex-wrap: nowrap; }

.sec-haven-header .site-nav a {
  font-family: var(--ff-body);
  font-weight: 500;
  letter-spacing: 0;
  padding-inline: 13px;
}
.sec-haven-header .head-tel {
  font-family: var(--ff-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sec-haven-header .head-cta,
.sec-haven-header .u-btn {
  font-family: var(--ff-body);
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--r-pill);
}
/* Ikona uz „Kontakt" — malo tješnje dugme da traka ostane u jednom redu. */
.sec-haven-header .head-cta { gap: 8px; padding-inline: 20px; }
.sec-haven-header .head-cta svg { width: 17px; height: 17px; flex: none; }
.sec-haven-header .msheet__list a {
  font-family: var(--ff-display);
  font-weight: 700;
}
.sec-haven-header .mobile-bar__i {
  font-family: var(--ff-body);
  font-weight: 600;
}

/* ---------- 02 · hero ---------- */

.sec-atelier-hero .hero__label {
  font-family: var(--ff-body);
  font-weight: 600;
  letter-spacing: 0.16em;
}
.sec-atelier-hero .hero h1 {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.sec-atelier-hero .hero__lead {
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  max-width: 34em;
}
.sec-atelier-hero .u-btn {
  font-family: var(--ff-body);
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--r-pill);
}
.sec-atelier-hero .hero__meta strong {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sec-atelier-hero .hero__meta span {
  font-family: var(--ff-body);
  letter-spacing: 0.1em;
}

/* Dvije dužine uvoda: duža za ekran, kraća za telefon. Ista tvrdnja,
   samo manje riječi tamo gdje red staje dva puta brže. */
.sec-atelier-hero .lead-narrow { display: none; }

/* ---------- 03 · djelatnost ---------- */

.sec-sightline-services .u-label,
.sec-aperta-about .u-label,
.sec-atelier-team .u-marker,
.sec-rowan-results .u-label,
.sec-fundament-instagram .u-label,
.sec-aperta-cta .u-label,
.sec-calm-referenzen .u-eyebrow,
.sec-calm-faq .u-eyebrow {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.sec-sightline-services .plan-t__in { border-radius: var(--r-card); }
.sec-sightline-services .plan-t h3 {
  font-size: clamp(1.125rem, 0.8vw + 1rem, 1.3125rem);
  line-height: 1.25;
}
.sec-sightline-services .plan-t__find { color: var(--c-text-muted); }

/* Broj u traci je telefon, pa mora ostati u jednom redu i na 320 px. */
.sec-sightline-services .price__main .u-num {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 5.4vw, 2.75rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent-strong);
}
.sec-sightline-services .price__in { border-radius: var(--r-card-lg); }
.sec-sightline-services .price__no li { color: var(--c-text-muted); }
.sec-sightline-services .price__no strong { color: var(--c-text); }

/* ---------- 04 · recenzije ---------- */

/* Sekcija je bila bijela, a bijele su i kartice u njoj — pa se kartica
   nije vidjela. Uz to, gornja zaobljena ivica parallaxa ispod puni se
   sa `--c-bg-alt`; kad je sekcija bijela, tu ostaje šav. Jedna promjena
   rješava oboje. */
.sec-calm-referenzen .revs { background: var(--c-bg-alt); }

.sec-calm-referenzen .revsum__num span {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.sec-calm-referenzen .revbar__v,
.sec-calm-referenzen .revbar__k {
  font-variant-numeric: tabular-nums;
}
.sec-calm-referenzen .revcard {
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
}
.sec-calm-referenzen .revcard__text {
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Traka je pisana za sedam recenzija u petlji. Ovdje ih ima jedna —
   pa nema šta da kruži: kartica staje na sredinu i miruje.
   (`data-marquee` je uklonjen iz markupa, skripta se sama povlači.) */
.sec-calm-referenzen .revmarquee--single {
  overflow: visible;
  padding-inline: var(--gutter);
}
.sec-calm-referenzen .revmarquee--single .revmarquee__track {
  width: auto;
  max-width: 640px;
  margin-inline: auto;
  transform: none;
  animation: none;
  padding: 0;
  list-style: none;
}
.sec-calm-referenzen .revmarquee--single .revcard {
  width: auto;
  max-width: none;
  flex: initial;
}
/* Traka je nosila blijede rubove za petlju koja ovdje ne postoji. */
.sec-calm-referenzen .revmarquee--single::before,
.sec-calm-referenzen .revmarquee--single::after { content: none; }

/* ---------- 05 · parallax ---------- */

/* Bez pozadinske fotografije: traka je puna boja brenda.
   Templatsko zatamnjenje (dva sloja plavog #1B4B66) više nema šta da
   zatamni, pa umjesto njega ide blagi preliv koji traci daje dubinu. */
.sec-calm-parallax .plx { background: var(--primary); }
.sec-calm-parallax .plx__veil {
  background:
    radial-gradient(78% 120% at 50% 0%,
      color-mix(in srgb, var(--accent) 22%, transparent),
      transparent 68%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 8%, transparent),
      transparent 55%,
      rgba(0, 0, 0, 0.22));
}

.sec-calm-parallax .plx__eyebrow {
  font-family: var(--ff-body);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sec-calm-parallax .plx__title {
  font-weight: 800;
  letter-spacing: -0.03em;
}
.sec-calm-parallax .plx__num {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.sec-calm-parallax .plx__label {
  font-family: var(--ff-body);
  letter-spacing: 0.02em;
}
.sec-calm-parallax .u-btn {
  font-family: var(--ff-body);
  font-weight: 600;
  border-radius: var(--r-pill);
}

/* ---------- 06 · o nama ---------- */

.sec-aperta-about .abt__media img {
  border-radius: var(--r-card-lg);
  /* Okvir se prilagođava slici: 2000×1405. */
  aspect-ratio: 2000 / 1405;
  height: auto;
  object-fit: cover;
  object-position: 50% 42%;
}
.sec-aperta-about .abt__media figcaption { color: var(--c-text-muted); }
.sec-aperta-about .abt__facts dd {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sec-aperta-about .promise { border-radius: var(--r-card-lg); }

/* ---------- 07 · tim ---------- */

/* Sekcija nije bijela: blaga tirkizna podloga je odvaja od „O nama"
   iznad i „Radova" ispod, koji su oba na osnovnoj boji. */
.sec-atelier-team .solo { background: var(--c-surface-soft); }

.sec-atelier-team .solo__frame img,
.sec-atelier-team .solo__frame {
  border-radius: var(--r-card-lg);
}
.sec-atelier-team .solo__frame img {
  /* 1333×2000 — uspravna. Okvir prati sliku umjesto obrnuto. */
  aspect-ratio: 1333 / 2000;
  height: auto;
  object-fit: cover;
  object-position: 50% 26%;
}
.sec-atelier-team .solo__figure figcaption { color: var(--c-text-muted); }
.sec-atelier-team .solo__v-no {
  font-family: var(--ff-display);
  font-weight: 800;
  color: var(--accent);
}
.sec-atelier-team .solo__values h3 {
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.1875rem);
}

/* ---------- 08 · radovi ---------- */

.sec-rowan-results .cmp,
.sec-rowan-results .cmp img {
  border-radius: var(--r-card);
}
.sec-rowan-results .cmp img {
  /* 900×491 — sve tri fotografije istog omjera. */
  aspect-ratio: 900 / 491;
  object-fit: cover;
}
.sec-rowan-results .case__b {
  font-family: var(--ff-body);
  font-weight: 600;
  border-radius: var(--r-pill);
  min-height: var(--tap);
}
.sec-rowan-results .cmp__tag {
  font-family: var(--ff-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--r-pill);
}
.sec-rowan-results .case h3 {
  font-size: clamp(1.125rem, 0.7vw + 1rem, 1.3125rem);
}
.sec-rowan-results .case p { color: var(--c-text-muted); }

/* ---------- 09 · galerija ---------- */

.sec-fundament-instagram .reel__link,
.sec-fundament-instagram .reel__link img {
  border-radius: var(--r-gallery);
}
/* Templat je slijeva držao 88 px za uspravnu traku (`.srail`) koju ovaj
   raspored uopšte ne nosi — pa je ostajao prazan pojas i sadržaj nije
   bio poravnat sa ostatkom sajta. Traka se ukida, ne pomjera. */
.sec-fundament-instagram { --rail-w: 0px; }

/* Okvir se prilagođava slici, ne slika okviru.
   Templat je crtao pločice u 9:16, za uspravan reel. Ove tri
   fotografije su 680×326, 680×470 i 490×510 — u 9:16 bi im nestale
   strane. Kvadrat je najbliži zajednički okvir: kompozit „prije i
   poslije" (490×510) gubi 4 % visine, a ostale dvije ostaju u kadru. */
.sec-fundament-instagram .reel__link {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}
.sec-fundament-instagram .reel__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Pločica je sada dugme (otvara uvećanje), pa mora izgledati kao pločica
   a ponašati se kao dugme. */
.sec-fundament-instagram .reel__link {
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.sec-fundament-instagram .reel__zoom {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-circle);
  background: rgba(251, 250, 248, 0.92);
  color: var(--c-ink);
  box-shadow: var(--sh-sm);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--t-base, 260ms) var(--ease),
              transform var(--t-base, 260ms) var(--ease);
}
.sec-fundament-instagram .reel__zoom svg { width: 18px; height: 18px; }
.sec-fundament-instagram .reel__link:hover .reel__zoom,
.sec-fundament-instagram .reel__link:focus-visible .reel__zoom {
  opacity: 1;
  transform: scale(1);
}
/* Na dodir nema lebdenja — tamo ikona stoji stalno. */
@media (hover: none) {
  .sec-fundament-instagram .reel__zoom { opacity: 1; transform: scale(1); }
}

/* Kadar po fotografiji, da zubi ostanu u sredini kvadrata. */
.sec-fundament-instagram .ig__grid li:nth-child(1) .reel__link img { object-position: 46% 50%; }
.sec-fundament-instagram .ig__grid li:nth-child(2) .reel__link img { object-position: 48% 46%; }
.sec-fundament-instagram .ig__grid li:nth-child(3) .reel__link img { object-position: 50% 50%; }
.sec-fundament-instagram .reel__meta {
  font-family: var(--ff-body);
  font-weight: 600;
}
.sec-fundament-instagram .reel__meta strong { font-weight: 600; }

/* ---------- 10 · pitanja ---------- */

.sec-calm-faq .faq__q button {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.1875rem);
  letter-spacing: -0.015em;
  min-height: var(--tap);
}
.sec-calm-faq .faq__item { border-radius: var(--r-card); }
.sec-calm-faq .faq__panel-in p {
  color: var(--c-text-muted);
  font-size: 1.0625rem;
}

/* ---------- 11 · kontakt ---------- */

.sec-aperta-cta h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
}
.sec-aperta-cta .u-btn {
  font-family: var(--ff-body);
  font-weight: 700;
  letter-spacing: 0;
  border-radius: var(--r-pill);
  min-height: 54px;
  font-variant-numeric: tabular-nums;
}
.sec-aperta-cta .cta__ready li { color: var(--c-on-dark-mu); }
.sec-aperta-cta .cta__status { font-family: var(--ff-body); }

/* ---------- 12 · podnožje ---------- */

.sec-terra-footer .ftr__word span {
  font-weight: 800;
  letter-spacing: -0.03em;
}
.sec-terra-footer .ftr__col h3 {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.sec-terra-footer .ftr__hours td { font-variant-numeric: tabular-nums; }
.sec-terra-footer .ftr__links a,
.sec-terra-footer .ftr__dir { font-family: var(--ff-body); }
.sec-terra-footer .ftr__top-btn {
  font-family: var(--ff-body);
  font-weight: 600;
  border-radius: var(--r-pill);
}
/* ---- podloga ----
   Crna, ali ne ravna: blagi preliv ka tamnom tirkizu u gornjem lijevom
   uglu, da podnožje pripada brendu a ne bilo kom sajtu. */
.sec-terra-footer .ftr {
  background:
    radial-gradient(120% 100% at 12% 0%,
      color-mix(in srgb, var(--accent) 20%, #000) 0%,
      transparent 62%),
    radial-gradient(90% 120% at 100% 100%,
      color-mix(in srgb, var(--accent) 12%, #000) 0%,
      transparent 58%),
    #000000;
}
/* Linije i tekst se podižu, jer na crnom nose manje nego na mastilu. */
.sec-terra-footer {
  --c-line-dark: rgba(244, 247, 245, 0.14);
  --c-on-dark-mu: rgba(244, 247, 245, 0.78);
}

/* ---- četiri stupca ----
   Brend je širi jer nosi opis; ostala tri su ravnomjerna. */
.sec-terra-footer .ftr__grid--4 {
  grid-template-columns: 1.5fr 1fr 1.05fr 1.15fr;
  gap: clamp(32px, 4vw, 72px);
  padding-block: 0 clamp(28px, 3.4vw, 44px);
}
@media (max-width: 1000px) {
  .sec-terra-footer .ftr__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .sec-terra-footer .ftr__grid--4 { grid-template-columns: 1fr; }
}

/* ---- naslovi stubaca ---- */
.sec-terra-footer .ftr__col h3 {
  color: color-mix(in srgb, var(--accent) 48%, white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 22px;
}

/* ---- brend ---- */
.sec-terra-footer .ftr__word {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 0;
  border-bottom: 0;
}
.sec-terra-footer .ftr__mark {
  width: 46px;
  height: 46px;
  flex: none;
  color: color-mix(in srgb, var(--accent) 62%, white);
}
.sec-terra-footer .ftr__mark svg { width: 100%; height: 100%; display: block; }
.sec-terra-footer .ftr__wordtx { display: flex; flex-direction: column; gap: 3px; }
.sec-terra-footer .ftr__word strong {
  display: block;
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-on-dark);
}
.sec-terra-footer .ftr__word small {
  display: block;
  margin-top: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-on-dark-mu);
}
.sec-terra-footer .ftr__about {
  margin: 22px 0 0;
  max-width: 30ch;
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--c-on-dark-mu);
}

/* Jedno dugme, jer je jedan profil i pronađen: Google.
   Društvenih mreža u podacima nema, pa ih nema ni ovdje. */
.sec-terra-footer .ftr__social {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}
.sec-terra-footer .ftr__social a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(244, 247, 245, 0.12);
  background: rgba(244, 247, 245, 0.06);
  color: var(--c-on-dark);
  transition: background-color 200ms var(--ease),
              border-color 200ms var(--ease),
              color 200ms var(--ease);
}
.sec-terra-footer .ftr__social a svg { width: 20px; height: 20px; }
.sec-terra-footer .ftr__social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---- linkovi ---- */
.sec-terra-footer .ftr__links { gap: 0; }
.sec-terra-footer .ftr__links a {
  min-height: 40px;
  font-size: 1rem;
  color: var(--c-on-dark-mu);
}
.sec-terra-footer .ftr__links a:hover { color: color-mix(in srgb, var(--accent) 55%, white); }

/* ---- radno vrijeme ---- */
.sec-terra-footer .ftr__hours { font-size: 1rem; }
.sec-terra-footer .ftr__hours th {
  padding: 14px 16px 14px 0;
  font-weight: 400;
  color: var(--c-on-dark-mu);
}
.sec-terra-footer .ftr__hours td {
  padding: 14px 0;
  font-weight: 600;
  color: var(--c-on-dark);
}
.sec-terra-footer .ftr__hours tr:first-child :is(th, td) { padding-top: 0; }
.sec-terra-footer .ftr__hours strong { font-weight: 700; }

/* ---- kako do nas ---- */
.sec-terra-footer .ftr__contact address {
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-on-dark);
}
.sec-terra-footer .ftr__dir {
  gap: 10px;
  margin-top: 18px;
  font-size: 1rem;
  color: var(--c-on-dark);
}
.sec-terra-footer .ftr__dir svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: color-mix(in srgb, var(--accent) 55%, white);
}
.sec-terra-footer .ftr__dir:hover { color: color-mix(in srgb, var(--accent) 55%, white); }

/* ---- razmaci ---- */
.sec-terra-footer .ftr { padding-block: clamp(48px, 5.5vw, 76px) clamp(20px, 2.4vw, 28px); }
@media (max-width: 900px) {
  /* Ispod ove širine lebdeća traka postoji — prostor joj se vraća. */
  .sec-terra-footer .ftr { padding-bottom: calc(24px + 88px); }
}

/* ---- „Na vrh" ----
   Bila je gola riječ sa tankom linijom ispod. Sada je dugme: obrub,
   ispuna i razmak, kao i ostala dugmad na sajtu. */
.sec-terra-footer .ftr__top-btn {
  padding: 11px 20px;
  border: 1px solid rgba(244, 247, 245, 0.28);
  border-radius: var(--r-pill);
  background: rgba(244, 247, 245, 0.05);
  color: var(--c-on-dark);
  transition: background-color 200ms var(--ease),
              border-color 200ms var(--ease);
}
.sec-terra-footer .ftr__top-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sec-terra-footer .ftr__bar { padding-top: clamp(18px, 2vw, 26px); }

/* Podnožje je tamno, a `brend.css` vezuje `--c-primary-lt` na
   `color-mix(--primary 62%, white)` — sivilo koje na #16241f daje
   3,5:1. Templat je tu držao svijetli ton (#C08A54) upravo zato.
   Vraćamo svijetli ton, ali u boji brenda: 7,1:1 na istoj podlozi. */
.sec-terra-footer {
  --c-primary-lt: color-mix(in srgb, var(--accent) 55%, white);
}

/* ============================================================
   3b. UVEĆANJE FOTOGRAFIJA — vlastiti element
   Ne pripada nijednoj sekciji; stoji na kraju `body`.
   ============================================================ */

.pxbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
}
.pxbox[hidden] { display: none; }

.pxbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 14, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: zoom-out;
}
.pxbox.is-open .pxbox__scrim { opacity: 1; }

.pxbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 20px);
  width: min(1100px, 100vw - 24px);
  padding: 0 4px;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pxbox.is-open .pxbox__panel { opacity: 1; transform: none; }

.pxbox__fig {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.pxbox__fig img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius-lg, 1rem);
  background: #0A100E;
}
.pxbox__fig figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 14px;
  color: #F4F7F5;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
}
.pxbox__fig figcaption small {
  color: rgba(244, 247, 245, 0.62);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.pxbox__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(244, 247, 245, 0.24);
  border-radius: 999px;
  background: rgba(244, 247, 245, 0.08);
  color: #F4F7F5;
  cursor: pointer;
  transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pxbox__btn svg { width: 22px; height: 22px; }
.pxbox__btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.pxbox__btn[hidden] { display: none; }

.pxbox__btn--close {
  position: absolute;
  top: -58px;
  right: 0;
  width: 44px;
  height: 44px;
}
.pxbox__btn--close svg { width: 19px; height: 19px; }

@media (max-width: 640px) {
  .pxbox__panel {
    /* Strelice silaze ispod slike: na uskom ekranu bi je inače stisnule. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: calc(100vw - 24px);
    padding-top: 44px;
  }
  .pxbox__fig { grid-column: 1 / -1; }
  .pxbox__fig img { max-height: 62vh; }
  .pxbox__btn { width: 100%; height: 46px; }
  .pxbox__btn--close { position: absolute; top: 0; right: 0; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .pxbox__scrim, .pxbox__panel, .pxbox__btn { transition: none; }
}

/* ============================================================
   4. WHATSAPP — vlastito dugme, na obje širine
   ============================================================ */

.wa-fab {
  position: fixed;
  right: clamp(14px, 4vw, 26px);
  bottom: clamp(14px, 4vw, 26px);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  background: #0E7C6F;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  box-shadow: 0 10px 28px -8px rgba(14, 124, 111, 0.55),
              0 2px 6px rgba(22, 36, 31, 0.16);
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.wa-fab:hover { background: #0B6357; transform: translateY(-2px); }
.wa-fab svg { width: 22px; height: 22px; flex: none; }

/* Ikona sama nije dugme — uz nju uvijek stoji riječ. */
.wa-fab span { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:hover { transform: none; }
}

/* ============================================================
   5. TELEFON — ovdje se donose odluke (max-width, ≤ 900 / 640 px)
   ============================================================ */

@media (max-width: 900px) {
  .sec-haven-header,
  .sec-atelier-hero,
  .sec-sightline-services,
  .sec-calm-referenzen,
  .sec-calm-parallax,
  .sec-aperta-about,
  .sec-atelier-team,
  .sec-rowan-results,
  .sec-fundament-instagram,
  .sec-calm-faq,
  .sec-aperta-cta,
  .sec-terra-footer {
    --header-h: 62px;
    --section-y: 40px;
  }

  /* Podnožje prati isti ritam odozgo. Dno zadržava prostor za lebdeću
     traku sekcije 01, koja ispod 900 px stoji fiksno uz donju ivicu. */
  .sec-terra-footer .ftr { padding-top: 40px; }

  /* ---------- WhatsApp na telefonu ----------
     Vlastito lebdeće dugme se UKLANJA: traka sekcije 01 već nosi
     WhatsApp — fiksna je uz donju ivicu, sa ikonom i riječju uz nju.
     Dva ista dugmeta jedno iznad drugog su bila višak.

     Zahtjev iz UPUTA.md time i dalje stoji: dugme postoji na obje
     širine — na telefonu u traci, na širokom ekranu kao lebdeće. */
  .wa-fab { display: none; }

  /* Traka: ikona I riječ na svakoj stavci, na svakoj širini.
     Templat ispod 380 px sakriva natpise, pa je na 375 px ostajao go
     zeleni krug — a „ikona sama nije dugme". Natpisi ostaju; umjesto
     njih se stišavaju pismo, ikona i razmak, da sve troje stane. */
  .sec-haven-header .mobile-bar__i span { display: inline; }
  .sec-haven-header .mobile-bar__i {
    gap: 6px;
    font-family: var(--ff-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    min-height: 50px;
    white-space: nowrap;
  }
  .sec-haven-header .mobile-bar__i svg { width: 17px; height: 17px; flex: none; }
  .sec-haven-header .mobile-bar__i--cta svg { width: 16px; height: 16px; }
}

/* Vrlo uski ekrani: traka i dalje drži tri natpisa, samo tješnje. */
@media (max-width: 360px) {
  .sec-haven-header .mobile-bar { gap: 4px; padding: 5px; }
  .sec-haven-header .mobile-bar__i {
    gap: 5px;
    font-size: 0.75rem;
  }
  .sec-haven-header .mobile-bar__i svg,
  .sec-haven-header .mobile-bar__i--cta svg { width: 15px; height: 15px; }
}

/* ------------------------------------------------------------
   HERO NA TELEFONU — tekst silazi ISPOD slike

   Granica je 620 px, ista na kojoj se i sekcija sama prelama, da
   između 621 i 640 ne ostane pojas u kojem važi pola jednog a pola
   drugog rasporeda.

   Zašto se ovdje ipak dira geometrija: sekcija drži fotografiju kao
   `position: absolute` sloj ispod teksta, a UPUTA traži da na uskom
   ekranu tekst siđe ISPOD slike i da zatamnjenja nestane. To se bez
   vraćanja sloja u tok ne može izvesti — pa se izvodi ovdje, pod
   `max-width`, a ne prepisivanjem prelomnih tačaka u `section.css`.
   Iznad 620 px ostaje tačno kako je nacrtano.
   ------------------------------------------------------------ */

@media (max-width: 620px) {

  /* Hero se SKRAĆUJE: iznad pregiba stoje naslov i jedno dugme. */
  .sec-atelier-hero .hero {
    display: block;
    min-height: 0;
    overflow: visible;
    background: var(--c-bg);
    padding-block: calc(var(--header-h) + 12px) 0;
  }

  /* Fotografija kao vlastiti blok — vidi se cijela, ništa preko nje. */
  .sec-atelier-hero .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    margin-inline: var(--gutter);
    border-radius: var(--r-card-lg);
    overflow: hidden;
    /* Sloj nosi parallax iz skripte; u toku bi ga taj pomak razbio. */
    transform: none !important;
    will-change: auto;
  }
  .sec-atelier-hero .hero__media :is(img, video) {
    /* Stvaran omjer, da se vidi šta je na slici. */
    aspect-ratio: 3 / 2;
    height: auto;
    object-position: 64% 28%;
  }

  /* Zatamnjenje je postojalo samo zato što je tekst bio preko slike. */
  .sec-atelier-hero .hero__scrim { display: none; }

  .sec-atelier-hero .hero__inner { padding-top: 20px; padding-bottom: 26px; }

  /* Tekst na punoj podlozi — pun kontrast, bez zatamnjenja. */
  .sec-atelier-hero .hero__label { color: var(--accent-strong); }
  .sec-atelier-hero .hero h1 {
    color: var(--c-ink);
    font-size: clamp(2.125rem, 10.5vw, 2.875rem);
    line-height: 1.05;
  }
  .sec-atelier-hero .hero h1 .u-em { color: var(--accent-strong); }
  .sec-atelier-hero .hero__lead {
    color: var(--c-text-muted);
    font-size: 1.0625rem;
    line-height: 1.55;
  }
  /* Kraći uvod: ista tvrdnja u tri reda umjesto šest. */
  .sec-atelier-hero .lead-wide   { display: none; }
  .sec-atelier-hero .lead-narrow { display: inline; }

  /* Jedno dugme je glavno; drugo je obrubljeno, ne puno. Sekcija ih
     već slaže u stubac — ovdje se mijenja samo težina. */
  .sec-atelier-hero .hero__cta .u-btn--ivory {
    --btn-bg: var(--accent);
    --btn-fg: #fff;
  }
  .sec-atelier-hero .hero__cta .u-btn--ivory:hover { --btn-bg: var(--accent-strong); }
  .sec-atelier-hero .hero__ghost {
    --btn-fg: var(--c-ink);
    --btn-bd: var(--c-line-strong);
  }
  .sec-atelier-hero .hero__ghost:hover {
    --btn-bg: var(--c-ink-06);
    --btn-bd: var(--c-line-strong);
  }

  /* Traka sa podacima ostaje u jednom stupcu (tako je i nacrtana na
     ovoj širini) — samo silazi na tamnu podlogu, da zadrži težinu
     koju je imala preko fotografije. */
  .sec-atelier-hero .hero__meta {
    background: var(--primary);
    border-top: 0;
    border-radius: var(--r-card);
    padding: 16px 18px;
    margin-top: 22px;
  }
  .sec-atelier-hero .hero__meta span {
    color: color-mix(in srgb, var(--accent) 45%, white);
  }
  .sec-atelier-hero .hero__meta strong { color: var(--c-on-dark); }
}

@media (max-width: 640px) {

  /* ---------- ostalo na uskom ekranu ---------- */

  .sec-sightline-services .price__no li,
  .sec-calm-faq .faq__panel-in p,
  .sec-rowan-results .case p { font-size: 1rem; }

  .sec-aperta-cta .u-btn { min-height: 52px; }

  /* Dugmad ispod klizača moraju biti dodirljiva palcem. */
  .sec-rowan-results .case__b { min-height: 46px; }
}

/* Vrlo uski ekrani: broj u traci mora ostati u jednom redu. */
@media (max-width: 360px) {
  .sec-sightline-services .price__main .u-num { font-size: 1.5rem; }
}

/* ============================================================
   6. ŠTAMPA
   ============================================================ */

@media print {
  .wa-fab,
  .sec-haven-header .mobile-bar,
  .sec-haven-header .msheet,
  .sec-terra-footer .ftr__top-btn { display: none !important; }
}