/* =========================================================
   KOVANO GVOŽĐE KOLAČEK 1897
   Design system: "Premium Retro Forge"
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --charcoal:  #121110;
  --iron:      #1D1B18;
  --smoke:     #2A2622;
  --cream:     #F1EAD8;
  --cream-dim: #B5AD99;
  --copper:    #B87333;
  --ember:     #E25822;

  --line-copper: rgba(184, 115, 51, .30);
  --line-copper-strong: rgba(184, 115, 51, .55);

  /* Type families */
  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-script:  "Pinyon Script", "Snell Roundhand", "Segoe Script", cursive;
  --f-body:    "EB Garamond", Georgia, serif;

  /* Spacing scale (8px base) */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --wrap: 1280px;
  --section-pad: clamp(72px, 11vw, 152px);
  --ease-heavy: cubic-bezier(.76, 0, .24, 1);

  /* Unified warm grade applied to every photo so the page reads as one collection */
  --grade: saturate(1.05) contrast(1.04) brightness(.98) sepia(.08);
  /* Logo artwork is white-on-transparent; warm it slightly toward cream (no invert).
     Swap to `invert(1) sepia(.16) saturate(.72) brightness(.98)` if using the black
     `-crni.png` version instead. */
  --logo-filter: brightness(.9) sepia(.28) saturate(.9);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--cream);
  background: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--copper); color: var(--charcoal); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* ---------- Film-grain overlay ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.section { padding-block: var(--section-pad); position: relative; }

.svg-defs { position: absolute; width: 0; height: 0; }

/* ---------- Typography primitives ---------- */
/* Section headings are the brand's cursive signature (Pinyon Script).
   Shared class -> every current & future page inherits it. Never letterspace
   a script face; size up ~1.3x since script reads optically small; generous
   line-height so swashes/ascenders/descenders (Đ ž č, long K) never clip. */
.h2 {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  line-height: 1.14;
  letter-spacing: 0;
  color: var(--cream);
  padding-bottom: .08em;        /* breathing room for deep descenders */
}
.h2--center { text-align: center; }
.h2--ink { color: var(--charcoal); }

.lede {
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.6;
  color: var(--cream);
  margin-top: var(--s4);
}
.body {
  color: var(--cream-dim);
  margin-top: var(--s3);
  max-width: 54ch;
}

.eyebrow {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .82rem;
  color: var(--copper);
  display: flex;
  align-items: baseline;
  gap: .7em;
}
.eyebrow .rom {
  font-style: normal;
  color: var(--cream-dim);
  letter-spacing: .1em;
}
.eyebrow--script {
  font-family: var(--f-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: var(--copper);
  line-height: 1;
}
.eyebrow--dark { color: var(--copper); }
.eyebrow--dark .rom { color: #7a6a52; }

.section-head { margin-bottom: clamp(48px, 6vw, 84px); }
.section-head .eyebrow { justify-content: center; margin-bottom: var(--s3); }

/* ---------- Ornamental fleuron divider ---------- */
.fleuron {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: var(--s3);
}
.fleuron span {
  display: block;
  height: 1px;
  width: min(120px, 16vw);
  background: linear-gradient(90deg, transparent, var(--copper));
}
.fleuron span:last-child { background: linear-gradient(90deg, var(--copper), transparent); }
.fleuron i {
  width: 7px; height: 7px;
  background: var(--copper);
  transform: rotate(45deg);
  flex: none;
}
.fleuron--ink span { background: linear-gradient(90deg, transparent, #b89a6a); }
.fleuron--ink span:last-child { background: linear-gradient(90deg, #b89a6a, transparent); }
.fleuron--ink i { background: var(--copper); }

/* ---------- Buttons ---------- */
.btn {
  --glow: 0 0 24px rgba(226, 88, 34, .35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .82rem;
  padding: 1.05em 2.3em;
  color: var(--cream);
  border: 1px solid var(--copper);
  border-radius: 1px;
  text-decoration: none;
  background: transparent;
  transition: background .5s var(--ease-heavy), color .5s var(--ease-heavy),
              box-shadow .5s ease, border-color .5s ease;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--copper);
  color: var(--charcoal);
  box-shadow: var(--glow);
}
.btn--fill {
  background: var(--copper);
  border-color: var(--copper);
  color: #1a1512;
}
.btn--fill:hover,
.btn--fill:focus-visible {
  background: var(--ember);
  border-color: var(--ember);
  box-shadow: var(--glow);
}
.btn--lg { padding: 1.2em 3em; font-size: .9rem; }

/* ---------- Arrow link ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: var(--s5);
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .82rem;
  color: var(--copper);
  text-decoration: none;
  transition: gap .4s ease, color .3s ease;
}
.link-arrow span { transition: transform .4s ease; }
.link-arrow:hover { color: var(--ember); gap: 1em; }

/* ---------- Wax-seal badge ---------- */
.seal { width: 120px; height: 120px; }
.seal__svg {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(42, 38, 34, .96), rgba(18, 17, 16, .96));
  box-shadow: inset 0 0 0 1px var(--line-copper), 0 8px 28px rgba(0, 0, 0, .55);
  overflow: visible;
}
.seal__ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: sealspin 60s linear infinite;
}
@keyframes sealspin { to { transform: rotate(360deg); } }
.seal__rim { fill: none; stroke: var(--copper); stroke-width: 1; opacity: .8; }
.seal__rim--thin { stroke-width: .6; opacity: .5; }
.seal__text {
  fill: var(--cream-dim);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 8.2px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.seal__mono {
  fill: var(--cream);
  font-family: var(--f-script);
  font-size: 46px;
  text-anchor: middle;
  dominant-baseline: central;
}

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1s var(--ease-heavy);
}
.preloader--done { transform: translateY(-100%); }
.preloader__inner { text-align: center; }
.preloader__script {
  display: block;
  font-family: var(--f-script);
  color: var(--cream);
  font-size: clamp(3.6rem, 11vw, 7.5rem);
  line-height: 1;
  clip-path: inset(0 100% 0 0);
  animation: drawIn 1.05s var(--ease-heavy) forwards .1s;
}
.preloader__year {
  display: block;
  margin-top: .5em;
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--copper);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  opacity: 0;
  animation: fadeUp .6s ease forwards .95s;
}
@keyframes drawIn { to { clip-path: inset(0 0 0 0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =========================================================
   NAVBAR
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
}
.nav.is-scrolled {
  background: rgba(18, 17, 16, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line-copper);
}
.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(14px, 1.8vw, 22px) clamp(20px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1; }
.brand__script {
  font-family: var(--f-script);
  font-size: clamp(1.8rem, 2.4vw, 2.3rem);
  color: var(--cream);
}
.brand__sub {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .58rem;
  color: var(--cream-dim);
  margin-top: .35em;
}
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav__links > a {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .82rem;
  color: var(--cream-dim);
  text-decoration: none;
  transition: color .3s ease;
}
.nav__links > a:not(.btn):hover { color: var(--cream); }
.btn--nav { padding: .7em 1.35em; font-size: .7rem; color: var(--cream); border-radius: 1px; }
.btn--nav:hover { color: var(--charcoal); }

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  z-index: 1002;
}
.burger span {
  position: absolute;
  left: 9px; right: 9px;
  height: 1.5px;
  background: var(--cream);
  transition: transform .4s var(--ease-heavy), opacity .3s ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--charcoal);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .5s ease, transform .6s var(--ease-heavy), visibility .5s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }

/* Fullscreen menu header: top bar holds ONLY the close (top-right);
   the logo sits below the bar, centered, with breathing room. */
.mobile-menu__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 60px;
  padding: 12px clamp(10px, 4vw, 20px);
  border-bottom: 1px solid var(--line-copper);
}
.mobile-menu__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  transition: color .3s ease;
}
.mobile-menu__close:hover,
.mobile-menu__close:focus-visible { color: var(--copper); }
.mobile-menu__logo {
  flex: none;
  display: block;
  margin: clamp(24px, 4vh, 32px) auto 0;
  max-height: 56px;
  width: auto;
  filter: var(--logo-filter);
}

.mobile-menu__links { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 4vh, 40px); text-align: center; }
.mobile-menu__links > a {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2rem, 8vw, 3rem);
  color: var(--cream);
  text-decoration: none;
  letter-spacing: .02em;
}
.mobile-menu__links > a.btn {
  font-size: .9rem;
  padding: 1em 2.4em;
  margin-top: var(--s3);
  letter-spacing: .16em;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
/* Hero slider (3-image crossfade + Ken Burns) */
.hero__slider { position: absolute; inset: -8% 0; z-index: 0; background: var(--charcoal); }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  filter: var(--grade);
  transition: opacity 1.2s ease;
  will-change: opacity, transform;
}
.hero__slide.is-active { opacity: 1; animation: kbA 7.6s ease-out forwards; }
.hero__slide:nth-child(even).is-active { animation-name: kbB; }
@keyframes kbA { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes kbB { from { transform: scale(1); }    to { transform: scale(1.08); } }

/* Slider indicators — three thin copper lines, active fills cream over 6s */
.hero__dots { position: absolute; left: clamp(20px, 5vw, 48px); bottom: clamp(24px, 5vh, 48px); z-index: 3; display: flex; gap: 10px; }
.hero__dot { display: flex; align-items: center; padding: 6px 0; }
.hero__dot i {
  display: block;
  width: 24px; height: 2px;
  background: rgba(184, 115, 51, .45);
  position: relative;
  overflow: hidden;
}
.hero__dot i::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: 0; background: var(--cream);
}
.hero__dot.is-active i::after { animation: dotfill 6s linear forwards; }
@keyframes dotfill { from { width: 0; } to { width: 100%; } }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(18, 17, 16, .96) 2%, rgba(18, 17, 16, .55) 34%, rgba(18, 17, 16, .28) 62%, rgba(18, 17, 16, .55) 100%),
    linear-gradient(to right, rgba(18, 17, 16, .7), transparent 55%);
}
.hero__year {
  position: absolute;
  right: 1.5vw; bottom: -3vh;
  z-index: 2;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(7rem, 24vw, 20rem);
  line-height: .8;
  color: var(--cream);
  opacity: .06;
  pointer-events: none;
  letter-spacing: -.02em;
}
.hero__content {
  position: relative;
  z-index: 3;
  padding-bottom: clamp(84px, 12vh, 150px);
  padding-top: 140px;
  max-width: 900px;
}
.hero__content .eyebrow--script { margin-bottom: var(--s2); }
.hero__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
}
/* Masked reveal, tight leading: `overflow: clip` + `overflow-clip-margin`
   keeps the reveal mask but extends the visible region ~.22em beyond the line
   box so diacritics (Ž Đ Č) and descenders (j p) never clip — WITHOUT padding
   that would inflate line spacing. */
.hero__title .line { display: block; overflow: clip; overflow-clip-margin: .22em; }
.hero__title .line > span { display: block; }
.hero__title .ember, .ember { color: var(--ember); }
.hero__sub {
  margin-top: var(--s4);
  max-width: 60ch;
  color: var(--cream-dim);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }

.seal--hero {
  position: absolute;
  right: clamp(20px, 7vw, 90px);
  bottom: -56px;
  z-index: 4;
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  right: clamp(20px, 5vw, 48px);
  bottom: clamp(24px, 5vh, 48px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.scroll-cue__label {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .62rem;
  color: var(--cream-dim);
  writing-mode: vertical-rl;
}
.scroll-cue__line { width: 1px; height: 54px; background: linear-gradient(var(--copper), transparent); position: relative; overflow: hidden; }
.scroll-cue__line::after {
  content: ""; position: absolute; top: -54px; left: 0; width: 1px; height: 54px;
  background: linear-gradient(var(--ember), transparent);
  animation: scrollLine 2.4s var(--ease-heavy) infinite;
}
@keyframes scrollLine { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(108px); } }

/* =========================================================
   HERITAGE MARQUEE
   ========================================================= */
.marquee {
  background: var(--iron);
  border-top: 1px solid var(--line-copper);
  border-bottom: 1px solid var(--line-copper);
  overflow: hidden;
  padding: 18px 0;
}
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee__group {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: clamp(.82rem, 1.3vw, 1.05rem);
  color: var(--cream-dim);
  white-space: nowrap;
  padding-right: .3em;
}
.marquee__group b { color: var(--copper); margin: 0 .35em; font-size: .68em; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   I. RADIONICA
   ========================================================= */
.radionica { background: var(--charcoal); border-top: 1px solid transparent; }
.radionica__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.heading-stack { position: relative; margin-top: var(--s3); }
.ghost-word {
  position: absolute;
  z-index: 0;
  font-family: var(--f-script);
  color: var(--copper);
  opacity: .06;              /* fainter now that the H2 itself is script */
  font-size: clamp(4.5rem, 10vw, 9rem);
  line-height: 1;
  left: -.04em; top: -.62em;
  white-space: nowrap;
  pointer-events: none;
}
.heading-stack .h2 { position: relative; z-index: 1; }

/* Timeline */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--s6);
  border-top: 1px solid var(--line-copper);
  border-bottom: 1px solid var(--line-copper);
}
.timeline li {
  padding: var(--s3) var(--s2) var(--s3) 0;
  display: flex;
  flex-direction: column;
  gap: .2em;
}
.timeline li + li { border-left: 1px solid var(--line-copper); padding-left: var(--s2); }
.timeline__name { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; color: var(--cream); }
.timeline__years { font-size: .8rem; letter-spacing: .06em; color: var(--cream-dim); }

/* Plate (double-frame retro photo) */
.radionica__media { position: relative; }
.plate { position: relative; padding: 12px; }
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-copper-strong);
  pointer-events: none;
}
.plate__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line-copper);
}
.plate__frame img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); }
.seal--plate { position: absolute; left: -34px; bottom: 44px; z-index: 3; }

/* Catalogue plate holding the landscape GIF + a Pinyon caption strip */
.plate__frame--wide { aspect-ratio: 4 / 3; }
.plate__cap { text-align: center; padding: 20px 12px 6px; }
.fleuron--mini { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 10px; }
.fleuron--mini span { width: min(64px, 12vw); }
.plate__cap-script {
  display: block;
  font-family: var(--f-script);
  color: var(--copper);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.1;
}

/* =========================================================
   II. KOLEKCIJE
   ========================================================= */
.kolekcije { background: var(--iron); }
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}
.card {
  position: relative;
  display: block;
  text-decoration: none;
  border: 1px solid var(--line-copper);
  background: var(--smoke);
  overflow: hidden;
  transition: border-color .5s ease, transform .6s var(--ease-heavy);
}
.card__media { aspect-ratio: 3 / 4; overflow: hidden; position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-heavy); }
/* Base warm grade on collection photos */
.card__media img { filter: var(--grade); }
/* Harmonise a lighter-toned photo with the collection's dusk palette (grade + extra darkening) */
.card__media--light img { filter: var(--grade) brightness(.66) saturate(.8) contrast(1.04); }
.card__media--light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(29, 27, 24, .62), rgba(18, 17, 16, .34) 55%);
  pointer-events: none;
}
.card:hover { border-color: var(--copper); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 22px 20px;
  background: linear-gradient(transparent, rgba(12, 11, 10, .5) 30%, rgba(12, 11, 10, .9));
  display: flex;
  flex-direction: column;
}
.card__name {
  font-family: var(--f-script);
  font-size: clamp(1.7rem, 2.3vw, 2.15rem);
  color: var(--cream);
  line-height: 1.05;
  transform: translateY(14px);
  transition: transform .55s var(--ease-heavy);
}
.card__sub {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .68rem;
  color: var(--copper);
  margin-top: .5em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease .05s, transform .55s var(--ease-heavy) .05s;
}
.card__arrow {
  position: absolute;
  top: 18px; right: 20px;
  font-size: 1.1rem;
  color: var(--cream);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity .5s ease, transform .5s var(--ease-heavy);
}
.card:hover .card__name { transform: translateY(0); }
.card:hover .card__sub { opacity: 1; transform: translateY(0); }
.card:hover .card__arrow { opacity: 1; transform: none; }

/* =========================================================
   III. PROCES
   ========================================================= */
.proces { background: var(--iron); border-top: 1px solid var(--line-copper); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
}
.step { position: relative; }
.step__num {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: var(--copper);
  line-height: 1;
  margin-bottom: var(--s3);
}
.step__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line-copper);
  margin-bottom: var(--s4);
}
.step__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); transition: transform 1.1s var(--ease-heavy); }
.step:hover .step__media img { transform: scale(1.04); }
.proces__more { text-align: center; margin-top: clamp(40px, 5vw, 64px); }
.proces__more .link-arrow { margin-top: 0; }
.step__title { font-family: var(--f-display); font-weight: 600; font-size: 1.7rem; color: var(--cream); margin-bottom: .4em; }
.step__text { color: var(--cream-dim); font-size: 1.05rem; }

/* Stats */
.stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 80px);
  margin-top: clamp(56px, 7vw, 104px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line-copper);
  flex-wrap: wrap;
}
.stat { text-align: center; }
.stat__num {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -.01em;
}
.stat__label {
  display: block;
  margin-top: .5em;
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .78rem;
  color: var(--copper);
}
.stat__div { width: 1px; height: 64px; background: var(--line-copper); }

/* =========================================================
   IV. SVETLOST (signature)
   ========================================================= */
.svetlost { background: var(--charcoal); overflow: hidden; }
.svetlost__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.svetlost__media { position: relative; }
.svetlost__glow {
  position: absolute;
  inset: -30% -25%;
  z-index: 0;
  background: radial-gradient(circle at 50% 45%, rgba(226, 88, 34, .38), rgba(184, 115, 51, .16) 38%, transparent 68%);
  filter: blur(10px);
  pointer-events: none;
}
.svetlost .plate { position: relative; z-index: 1; }
.svetlost .plate__frame { aspect-ratio: 4 / 5; }
.svetlost__text { position: relative; z-index: 2; }
.svetlost__text .btn { margin-top: var(--s5); }

/* =========================================================
   V. REFERENCE (aged paper)
   ========================================================= */
.reference { background: var(--cream); color: var(--charcoal); }
.reference .reference__intro {
  text-align: center;
  margin-top: var(--s4);
  color: #55483a;
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
}
.ref-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 26px);
  max-width: 900px;
  margin-inline: auto;
}
.ref-list li {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(.82rem, 1.2vw, .98rem);
  color: var(--charcoal);
}
.ref-list__d { color: var(--copper); font-size: .7em; }
.quote {
  max-width: 900px;
  margin: clamp(56px, 7vw, 96px) auto 0;
  text-align: center;
}
.quote .fleuron { margin-bottom: var(--s5); }
.quote blockquote {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  line-height: 1.28;
  color: var(--charcoal);
  letter-spacing: -.005em;
}
.quote figcaption {
  margin-top: var(--s4);
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8rem;
  color: var(--copper);
}
.quote figcaption span { color: #7a6a52; }

/* =========================================================
   CTA / KONTAKT
   ========================================================= */
.cta { background: var(--charcoal); text-align: center; overflow: hidden; }
.cta__inner { position: relative; z-index: 1; max-width: 780px; margin-inline: auto; }
.cta .fleuron { margin-bottom: var(--s5); }
.cta .eyebrow--script { justify-content: center; display: flex; margin-bottom: var(--s2); }
.cta .h2 { margin-inline: auto; }
.cta__body { color: var(--cream-dim); margin-top: var(--s4); font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.cta .btn--lg { margin-top: var(--s5); }
.cta__contact {
  margin-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4em 1em;
  font-size: .98rem;
  color: var(--cream-dim);
  letter-spacing: .02em;
}
.cta__contact a { color: var(--cream-dim); text-decoration: none; transition: color .3s ease; }
.cta__contact a:hover { color: var(--copper); }
.seal--cta {
  position: absolute;
  top: clamp(40px, 8vw, 90px);
  right: clamp(20px, 10vw, 140px);
  z-index: 0;
  opacity: .9;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer { position: relative; overflow: hidden; background: var(--iron); border-top: 1px solid var(--line-copper); padding-block: clamp(56px, 6vw, 88px) var(--s5); }
.footer__ghost {
  position: absolute;
  right: -.04em; bottom: -.16em;
  z-index: 0;
  font-family: var(--f-script);
  font-size: clamp(6rem, 18vw, 15rem);
  line-height: .8;
  color: var(--cream);
  opacity: .06;
  pointer-events: none;
  white-space: nowrap;
}
.footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--line-copper);
}
.footer__logo { display: block; height: 64px; width: auto; filter: var(--logo-filter); }
.footer__tag { color: var(--cream-dim); margin-top: var(--s2); max-width: 34ch; }
.footer__h {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .76rem;
  color: var(--copper);
  margin-bottom: var(--s3);
}
.footer__nav, .footer__social { display: flex; flex-direction: column; gap: .7em; }
.footer__nav a, .footer__social a {
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--cream-dim);
  text-decoration: none;
  width: fit-content;
  transition: color .3s ease;
}
.footer__nav a:hover, .footer__social a:hover { color: var(--cream); }
.footer__hours { color: var(--cream-dim); margin-bottom: var(--s4); }
.footer__social { margin-top: 0; }
.footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5em 1em;
  padding-top: var(--s5);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--cream-dim);
  text-align: center;
}
.footer__diamond { color: var(--copper); font-size: .7em; }
.footer__credit a { color: var(--copper); text-decoration: none; transition: color .3s ease; }
.footer__credit a:hover, .footer__credit a:focus-visible { color: var(--ember); }

/* =========================================================
   REVEAL (JS-driven) & fallbacks
   ========================================================= */
.has-js .reveal { opacity: 0; transform: translateY(32px); }
.reveal.io-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-heavy), transform 1s var(--ease-heavy); }

/* Lantern light-on default (dimmed until lit) */
.has-js .svetlost__text { opacity: .28; transition: opacity 1.3s ease; }
.has-js .svetlost .plate__frame img { filter: var(--grade) brightness(.5) saturate(.85); transition: filter 1.5s ease; }
.svetlost.is-lit .svetlost__text { opacity: 1; }
.svetlost.is-lit .plate__frame img { filter: var(--grade); }
.svetlost__glow { opacity: 0; transition: opacity 1.5s ease; }
.svetlost.is-lit .svetlost__glow { opacity: 1; }

/* Image fallback panels */
.img-failed {
  background:
    radial-gradient(120% 100% at 50% 12%, rgba(226, 88, 34, .16), transparent 58%),
    linear-gradient(158deg, var(--smoke), var(--charcoal));
  position: relative;
}
.img-failed img { display: none; }
.img-failed::after {
  content: attr(data-fallback);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px;
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .72rem;
  color: var(--cream-dim);
}
.hero__media.img-failed::after { letter-spacing: .3em; font-size: .9rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .radionica__grid { grid-template-columns: 1fr; gap: clamp(48px, 8vw, 72px); }
  .radionica__media { max-width: 520px; }
  .svetlost__grid { grid-template-columns: 1fr; gap: clamp(48px, 8vw, 64px); }
  .svetlost__media { order: -1; max-width: 560px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .steps { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .step__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline li:nth-child(3), .timeline li:nth-child(4) { border-top: 1px solid var(--line-copper); }
  .timeline li:nth-child(3) { border-left: none; }
  .stats { gap: var(--s5); }
  .stat__div { display: none; }
  .stat { flex: 1 1 40%; }
  .seal--cta { display: none; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .hero__content { padding-bottom: 96px; }
}

@media (max-width: 420px) {
  .cards { grid-template-columns: 1fr; }
  .seal { width: 92px; height: 92px; }
  .seal--plate { left: -18px; bottom: 24px; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .has-js .reveal { opacity: 1 !important; transform: none !important; }
  .has-js .svetlost__text { opacity: 1 !important; }
  .has-js .svetlost .plate__frame img { filter: none !important; }
  .svetlost__glow { opacity: 1; }
  .seal__ring { animation: none; }
  .marquee__track { animation: none; }
  .preloader__script { clip-path: none; animation: none; }
  .preloader__year { opacity: 1; animation: none; }
  .scroll-cue__line::after { animation: none; }
}

/* =========================================================
   LOGO (real brand mark) — colorised to warm cream
   ========================================================= */
.preloader__logo {
  display: block;
  width: clamp(238px, 62vw, 340px);
  height: auto;
  margin-inline: auto;
  filter: var(--logo-filter);
  opacity: 0;
  transform: scale(.92);
  animation: preLogo .8s var(--ease-heavy) forwards .15s;
}
@keyframes preLogo { to { opacity: 1; transform: scale(1); } }

.brand { align-items: center; }
.brand__logo {
  display: block;
  height: 44px;
  width: auto;
  filter: var(--logo-filter);
  transition: height .45s var(--ease-heavy);
}
.nav__inner { transition: padding .45s var(--ease-heavy), background .5s ease; }
.nav.is-scrolled .brand__logo { height: 30px; }
.nav.is-scrolled .nav__inner { padding-top: clamp(9px, 1.1vw, 13px); padding-bottom: clamp(9px, 1.1vw, 13px); }

/* =========================================================
   SCROLL PROGRESS hairline
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  z-index: 1200;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--copper), var(--ember));
  pointer-events: none;
}

/* =========================================================
   IV. IZ RADIONICE (gallery mosaic)
   ========================================================= */
.galerija { background: var(--charcoal); }
.gallery { columns: 3; column-gap: clamp(16px, 2.2vw, 34px); }
.gallery__item {
  break-inside: avoid;
  margin: 0 0 clamp(16px, 2.2vw, 34px);
  position: relative;
  will-change: transform;
}
.gallery__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-copper);
  transition: border-color .5s ease;
}
.gallery__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--grade);
  display: block;
}
.gallery__item--wide .gallery__frame { aspect-ratio: 3 / 2; }
.gallery__item--tall .gallery__frame { aspect-ratio: 3 / 4; }
.gallery__item:hover .gallery__frame { border-color: var(--copper); }
.gallery__cap {
  position: absolute;
  left: 16px; bottom: 12px;
  font-family: var(--f-script);
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  line-height: 1;
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s var(--ease-heavy);
  pointer-events: none;
}
.gallery__item:hover .gallery__cap { opacity: 1; transform: translateY(0); }

/* =========================================================
   FLOATING UI — back-to-top + click-to-call
   ========================================================= */
.fab {
  position: relative;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--iron);
  color: var(--cream);
  border: 1px solid var(--line-copper);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .5s ease, transform .5s var(--ease-heavy),
              color .4s ease, border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover, .fab:focus-visible {
  color: var(--ember);
  border-color: var(--copper);
  box-shadow: 0 0 24px rgba(226, 88, 34, .35), 0 8px 24px rgba(0, 0, 0, .45);
}
.fab--top { position: fixed; right: 24px; bottom: 24px; z-index: 800; }

/* Tooltip */
.fab::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--iron);
  border: 1px solid var(--line-copper);
  color: var(--cream-dim);
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .58rem;
  padding: .5em .85em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.fab:hover::after, .fab:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Click-to-call — bottom left, mirroring back-to-top on the right.
   .fab starts hidden and is revealed by JS once you scroll past the hero;
   the phone must not wait for that, so it opts out of the hidden state. */
.fab--call {
  position: fixed; left: 24px; bottom: 24px; z-index: 801;
  opacity: 1; transform: none; pointer-events: auto;
  color: var(--copper);
}
.fab--call:hover, .fab--call:focus-visible { color: var(--ember); }
/* The focus ring must be visible against the dark plate for keyboard users. */
.fab--call:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
/* Anchored left, not centred: this button sits against the left edge, and a
   centred tooltip would hang off the viewport. */
.fab--call::after { left: 0; transform: translateX(0) translateY(4px); }
.fab--call:hover::after, .fab--call:focus-visible::after { transform: translateX(0) translateY(0); }

body.menu-open .fab { opacity: 0 !important; pointer-events: none !important; }

/* =========================================================
   CTA ember particles
   ========================================================= */
.cta__particles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ember-particle {
  position: absolute;
  bottom: -12px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ember);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: emberRise;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
@keyframes emberRise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  12% { opacity: .8; }
  70% { opacity: .5; }
  100% { transform: translateY(-240px) scale(.4); opacity: 0; }
}

/* =========================================================
   MICRO-INTERACTIONS
   ========================================================= */
[data-magnetic] { will-change: transform; }

/* Animated copper underline, left -> right */
.nav__links > a:not(.btn),
.footer__nav a, .footer__social a,
.cta__contact a { position: relative; }
.nav__links > a:not(.btn)::after,
.footer__nav a::after, .footer__social a::after,
.cta__contact a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease-heavy);
}
.nav__links > a:not(.btn):hover::after,
.footer__nav a:hover::after, .footer__social a:hover::after,
.cta__contact a:hover::after { transform: scaleX(1); }

/* =========================================================
   RESPONSIVE — new components
   ========================================================= */
@media (max-width: 1024px) {
  .gallery { columns: 2; }
}
@media (max-width: 560px) {
  .fab--top { right: 16px; bottom: 16px; }
  .fab--call { left: 16px; bottom: 16px; }
}
@media (max-width: 480px) {
  .gallery { columns: 1; }
}

/* =========================================================
   REDUCED MOTION — new components
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active { animation: none; transform: scale(1); }
  .hero__dot.is-active i::after { animation: none; width: 100%; }
  .preloader__logo { opacity: 1; transform: none; animation: none; }
  .cvisual:hover .cvisual__frame img { transform: none; }
  .footer__ghost, .hero__year { opacity: .05; }
}

/* =========================================================
   PROIZVODI — navbar mega-dropdown (desktop)
   ========================================================= */
.nav__droptrigger {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .82rem;
  color: var(--cream-dim);
  display: inline-flex;
  align-items: center;
  gap: .4em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color .3s ease;
}
.nav__droptrigger:hover,
.nav.mega-open .nav__droptrigger { color: var(--cream); }
.nav__caret { font-size: .62em; transition: transform .3s ease; }
.nav.mega-open .nav__caret { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(18, 17, 16, .97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-copper);
  border-bottom: 1px solid var(--line-copper);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s var(--ease-heavy), visibility .25s;
}
.nav.mega-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 5vw, 48px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 56px);
}
.mega__col { display: flex; flex-direction: column; }
.mega__title {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .72rem;
  color: var(--copper);
}
.mega__col .fleuron { margin: 12px 0 14px; justify-content: flex-start; gap: 10px; }
.mega__col .fleuron span { width: 36px; }
.mega__col .fleuron span:last-child { display: none; }
.mega__link {
  position: relative;
  width: fit-content;
  font-family: var(--f-body);
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--cream-dim);
  text-decoration: none;
  padding: .3em 0;
  transition: color .3s ease;
}
.mega__link::after {
  content: "";
  position: absolute; left: 0; bottom: 2px;
  width: 100%; height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--ease-heavy);
}
.mega__link:hover, .mega__link:focus-visible { color: var(--copper); }
.mega__link:hover::after, .mega__link:focus-visible::after { transform: scaleX(1); }

/* =========================================================
   PROIZVODI — mobile accordion (in fullscreen menu)
   ========================================================= */
.m-acc { width: min(420px, 82vw); text-align: center; }
.m-acc__trigger {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2rem, 8vw, 3rem);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: .3em;
  cursor: pointer;
}
.m-acc__trigger::after { content: "+"; color: var(--copper); font-weight: 400; transition: transform .3s ease; }
.m-acc.is-open .m-acc__trigger::after { transform: rotate(45deg); }
.m-acc__panel { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-heavy); }
.m-acc.is-open .m-acc__panel { max-height: 3000px; }
.m-acc__group { padding: 8px 0; border-top: 1px solid var(--line-copper); margin-top: 14px; }
.m-acc__group:first-child { margin-top: 18px; }
.m-acc__gtrigger {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .92rem;
  color: var(--copper);
  cursor: pointer;
  padding: 10px 0;
  width: 100%;
}
.m-acc__glist { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-heavy); display: flex; flex-direction: column; gap: 2px; }
.m-acc__group.is-open .m-acc__glist { max-height: 1600px; padding-bottom: 10px; }
.m-acc__glist a {
  font-family: var(--f-body);
  font-size: 1.15rem;
  color: var(--cream-dim);
  text-decoration: none;
  padding: 7px 0;
}
.m-acc__glist a:active { color: var(--copper); }

/* Let the fullscreen menu scroll when the accordion is expanded */
.mobile-menu { overflow-y: auto; }
.mobile-menu__links { flex: 1 0 auto; justify-content: center; padding-block: clamp(24px, 5vh, 56px); }

/* =========================================================
   PRODUCT SUBPAGE — compact hero
   ========================================================= */
.phero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: 120px;
}
.phero__bg {
  position: absolute; inset: -4%;
  background-size: cover;
  background-position: center;
  filter: var(--grade) brightness(.42) blur(5px);
  transform: scale(1.06);
}
.phero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(18, 17, 16, .96) 4%, rgba(18, 17, 16, .5) 60%, rgba(18, 17, 16, .7)),
    radial-gradient(120% 120% at 12% 100%, rgba(226, 88, 34, .12), transparent 55%);
}
.phero__inner { position: relative; z-index: 2; padding-bottom: clamp(34px, 5vw, 60px); max-width: 900px; }
.breadcrumb {
  display: flex; align-items: center; gap: .6em;
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--cream-dim);
  margin-bottom: var(--s3);
}
.breadcrumb a { color: var(--copper); text-decoration: none; }
.breadcrumb a:hover { color: var(--ember); }
.breadcrumb span[aria-hidden] { color: #7a6a52; }
.phero .h2 { margin-bottom: var(--s3); }
.phero__intro {
  font-family: var(--f-body);
  color: var(--cream-dim);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  max-width: 60ch;
}

/* PRODUCT grid */
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 30px);
}
.pgrid__item { position: relative; }
.pgrid__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line-copper);
  cursor: zoom-in;
  background: var(--smoke);
  transition: border-color .5s ease;
}
.pgrid__frame img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); transition: transform 1s var(--ease-heavy); }
.pgrid__item:hover .pgrid__frame { border-color: var(--copper); }
.pgrid__item:hover .pgrid__frame img { transform: scale(1.05); }
.pgrid__frame::after {
  content: "⤢";
  position: absolute; top: 12px; right: 14px;
  font-size: 1rem; color: var(--cream);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .4s ease, transform .4s ease;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.pgrid__item:hover .pgrid__frame::after { opacity: .9; transform: none; }
.pgrid__cap {
  display: block;
  margin-top: 14px;
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .72rem;
  color: var(--cream-dim);
}

/* Product-page CTA reuses .cta; sibling cross-links */
.siblings {
  border-top: 1px solid var(--line-copper);
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(28px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(16px, 2vw, 28px);
}
.siblings__label {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .72rem;
  color: var(--copper);
  margin-right: .4em;
}
.siblings a {
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--cream-dim);
  text-decoration: none;
  transition: color .3s ease;
}
.siblings a[aria-current="page"] { color: var(--cream); }
.siblings a:hover { color: var(--copper); }

/* Homepage: "sve kategorije" link under the cards */
.cards-more { text-align: center; margin-top: clamp(36px, 4vw, 56px); }

/* proizvodi.html index — group blocks */
.pindex { display: grid; gap: clamp(40px, 5vw, 72px); }
.pindex__group { }
.pindex__group .fleuron { justify-content: flex-start; margin: 14px 0 22px; gap: 12px; }
.pindex__group .fleuron span:last-child { display: none; }
.pindex__group .fleuron span { width: 60px; }
.pindex__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px clamp(20px, 3vw, 44px);
}
.pindex__list a {
  position: relative;
  width: fit-content;
  font-family: var(--f-body);
  font-size: 1.1rem;
  color: var(--cream-dim);
  text-decoration: none;
  padding: .2em 0;
  transition: color .3s ease;
}
.pindex__list a:hover { color: var(--copper); }

/* =========================================================
   LIGHTBOX (shared — grids + homepage gallery)
   ========================================================= */
.lightbox {
  position: fixed; inset: 0;
  z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 9, 8, .95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage { max-width: 88vw; max-height: 84vh; display: flex; }
.lightbox__img {
  max-width: 88vw; max-height: 84vh;
  width: auto; height: auto;
  object-fit: contain;
  border: 1px solid var(--line-copper);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7);
  background: var(--charcoal);
}
.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  color: var(--cream);
  border: 1px solid var(--line-copper);
  background: rgba(18, 17, 16, .6);
  border-radius: 50%;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.lightbox__btn:hover, .lightbox__btn:focus-visible { color: var(--ember); border-color: var(--copper); background: var(--iron); }
.lightbox__close { top: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); font-size: 1.6rem; line-height: 1; }
.lightbox__prev { left: clamp(12px, 3vw, 32px); top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.lightbox__next { right: clamp(12px, 3vw, 32px); top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.lightbox__count {
  position: absolute;
  bottom: clamp(16px, 3vw, 28px);
  left: 50%; transform: translateX(-50%);
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .72rem;
  color: var(--cream-dim);
}

/* =========================================================
   RESPONSIVE — Task 4 components
   ========================================================= */
@media (max-width: 1024px) {
  .mega__inner { grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .lightbox__prev { left: 10px; }
  .lightbox__next { right: 10px; }
  .lightbox__btn { width: 46px; height: 46px; }
}
@media (max-width: 480px) {
  .pgrid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* =========================================================
   O NAMA — brand story (Task 3)
   ========================================================= */
.phero--about { min-height: 52vh; }
.phero--contact { min-height: 42vh; }

/* Intro two-column */
.about-intro__grid {
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.about-intro__text .eyebrow--script { margin-bottom: var(--s3); }
.about-intro__text p + p { margin-top: var(--s3); }
.about-intro__text p:not(.eyebrow) {
  font-family: var(--f-body);
  color: var(--cream-dim);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.78;
}
.about-intro__media { position: relative; }
.about-intro__cap {
  text-align: center;
  margin-top: var(--s3);
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .72rem;
  color: var(--cream-dim);
}

/* Timeline — copper spine + alternating entries */
.timeline-sec { background: var(--iron); border-top: 1px solid var(--line-copper); border-bottom: 1px solid var(--line-copper); }
.gtimeline { position: relative; max-width: 960px; margin-inline: auto; }
.gtimeline__spine {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(var(--copper), var(--line-copper-strong));
  transform-origin: top center;
}
.tl-entry {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 6vw, 92px);
  padding-block: clamp(22px, 3.4vw, 44px);
}
.tl-entry__marker {
  position: absolute;
  left: 50%;
  top: clamp(34px, 4.6vw, 60px);
  width: 14px; height: 14px;
  transform: translate(-50%, 0) rotate(45deg);
  background: var(--copper);
  box-shadow: 0 0 0 5px var(--iron), 0 0 16px rgba(226, 88, 34, .4);
  z-index: 2;
}
.tl-card { display: flex; flex-direction: column; gap: 12px; }
.tl-entry--left .tl-card { grid-column: 1; align-items: flex-end; text-align: right; }
.tl-entry--right .tl-card { grid-column: 2; align-items: flex-start; text-align: left; }
.tl-portrait { width: clamp(104px, 13vw, 140px); }
.tl-portrait__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-copper-strong);
  padding: 6px;
}
.tl-portrait__frame::before {
  content: ""; position: absolute; inset: 6px;
  border-radius: 50%;
  border: 1px solid var(--line-copper);
  z-index: 2; pointer-events: none;
}
.tl-portrait__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: var(--grade); }
.tl-portrait--seal .tl-portrait__ring {
  width: clamp(104px, 13vw, 140px);
  height: clamp(104px, 13vw, 140px);
}
.tl-gen { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; font-size: .68rem; color: var(--copper); }
.tl-name { font-family: var(--f-script); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.1rem); line-height: 1; color: var(--cream); }
.tl-years { font-family: var(--f-display); letter-spacing: .12em; font-size: .84rem; color: var(--cream-dim); }
.tl-text { font-family: var(--f-body); color: var(--cream-dim); font-size: 1rem; line-height: 1.7; max-width: 42ch; }

/* Žig autentičnosti band */
.zig {
  background: var(--charcoal);
  border-top: 1px solid var(--line-copper);
  border-bottom: 1px solid var(--line-copper);
  padding-block: clamp(56px, 8vw, 108px);
  position: relative;
  overflow: hidden;
}
.zig__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(36px, 6vw, 92px); align-items: center; }
.seal--zig { width: clamp(150px, 20vw, 240px); height: clamp(150px, 20vw, 240px); }
.zig__text .eyebrow--script { margin-bottom: var(--s2); }
.zig__text .h2 { margin-bottom: var(--s3); }
.zig__body { font-family: var(--f-body); color: var(--cream-dim); font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 56ch; }

/* Quote moment */
.quote-sec { text-align: center; }
.quote-sec__inner { max-width: 900px; margin-inline: auto; }
.quote-sec__mark { display: block; font-family: var(--f-script); color: var(--copper); opacity: .55; font-size: clamp(5rem, 12vw, 8.5rem); line-height: .5; height: .5em; }
.quote-sec__q { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 3.4vw, 2.9rem); line-height: 1.32; color: var(--cream); }
.quote-sec__cite { display: block; margin-top: var(--s4); font-family: var(--f-display); font-style: normal; text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; color: var(--copper); }

/* CTA two-button row (shared) */
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-top: var(--s5); }
.cta__actions .btn { margin-top: 0; }

/* =========================================================
   KONTAKT (Task 4)
   ========================================================= */
.contact__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: start; }

/* Workshop plate — replaced the inquiry form.
   Built from the same tokens as .cplate opposite it (iron ground, doubled
   copper hairline) so the two columns read as a matched pair. */
.cvisual { position: relative; margin: 0; display: flex; flex-direction: column; width: 100%; background: var(--iron); border: 1px solid var(--line-copper); }
.cvisual__frame { position: relative; overflow: hidden; height: clamp(300px, 62vw, 460px); }
.cvisual__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 17, 16, 0) 45%, rgba(18, 17, 16, .72) 100%);
  pointer-events: none;
}
.cvisual__frame img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transition: transform 1.2s var(--ease-heavy);
}
.cvisual:hover .cvisual__frame img { transform: scale(1.03); }
.cvisual__body { position: relative; padding: clamp(22px, 3vw, 38px); }
.cvisual__body::before { content: ""; position: absolute; inset: 8px 8px 8px 8px; border: 1px solid var(--line-copper); pointer-events: none; }
.cvisual__eyebrow { position: relative; margin-bottom: var(--s3); }
.cvisual__text { position: relative; font-family: var(--f-body); font-size: 1.02rem; line-height: 1.75; color: var(--cream-dim); margin-bottom: var(--s4); max-width: 46ch; }
.cvisual__actions { position: relative; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cvisual__hours { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: var(--cream-dim); }

/* Two-column view only: let the photo absorb whatever height the contact
   plate opposite happens to be, so neither column ends in dead space.
   Below 900px the grid is one column and the clamp above takes over. */
@media (min-width: 901px) {
  .contact__grid { align-items: stretch; }
  .contact__visual { display: flex; }
  .cvisual__frame { flex: 1 1 auto; height: auto; min-height: 260px; }
  .cvisual__frame img { position: absolute; inset: 0; }
}

/* Direct-contact plate */
.cplate { position: relative; background: var(--smoke); border: 1px solid var(--line-copper); padding: clamp(24px, 3.5vw, 44px); }
.cplate::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line-copper); pointer-events: none; }
.cplate__logo { position: relative; width: clamp(140px, 20vw, 172px); height: auto; filter: var(--logo-filter); margin-bottom: var(--s4); }
.cplate__rows { display: flex; flex-direction: column; }
.cplate__rows li { display: flex; gap: 14px; align-items: flex-start; padding-block: 15px; border-top: 1px solid var(--line-copper); font-family: var(--f-body); color: var(--cream); line-height: 1.5; }
.cplate__ico { color: var(--copper); flex: none; margin-top: 3px; }
.cplate__rows a { color: var(--cream); text-decoration: none; transition: color .3s ease; }
.cplate__rows a:hover { color: var(--copper); }
.cplate__social { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line-copper); font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; }
.cplate__social a { color: var(--cream-dim); text-decoration: none; transition: color .3s ease; }
.cplate__social a:hover { color: var(--copper); }
.cplate__social span { color: #6f6656; }
.cplate__seal { margin-top: var(--s5); display: flex; justify-content: center; }
.seal--sm { width: 92px; height: 92px; }

/* Map band — dark-map treatment, lifts on hover */
.mapband { position: relative; border-top: 1px solid var(--line-copper); border-bottom: 1px solid var(--line-copper); background: var(--charcoal); }
.mapband__frame { position: relative; height: clamp(320px, 42vw, 480px); overflow: hidden; }
.mapband__iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.5) invert(.9) hue-rotate(180deg) contrast(.9) brightness(.95); transition: filter .6s ease; }
.mapband:hover .mapband__iframe { filter: none; }

/* Visit strip */
.visit-strip { background: var(--iron); text-align: center; padding-block: clamp(28px, 4vw, 48px); }
.visit-strip p { font-family: var(--f-body); color: var(--cream-dim); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 70ch; margin-inline: auto; }

/* =========================================================
   RESPONSIVE — Task 3/4 pages
   ========================================================= */
@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__info { max-width: 480px; }
}
@media (max-width: 880px) {
  .about-intro__grid { grid-template-columns: 1fr; }
  .about-intro__media { max-width: 460px; margin-inline: auto; }
  .zig__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s5); }
  .zig__text .eyebrow--script { justify-content: center; }
  .zig__body { margin-inline: auto; }
}
@media (max-width: 860px) {
  .gtimeline { max-width: 560px; }
  .gtimeline__spine { left: 16px; }
  .tl-entry { grid-template-columns: 1fr; padding-left: 52px; padding-block: clamp(20px, 5vw, 36px); }
  .tl-entry--left .tl-card,
  .tl-entry--right .tl-card { grid-column: 1; align-items: flex-start; text-align: left; }
  .tl-entry__marker { left: 16px; top: clamp(26px, 6vw, 40px); }
}

/* =========================================================
   PROCES (Task 3) + GALERIJA (Task 4)  — PROMPT 05
   ========================================================= */
.phero--proces { min-height: 46vh; }
.phero--gallery { min-height: 40vh; }

/* Three craft stages — alternating rows with a ghosted roman numeral */
.pstage-sec { background: var(--iron); border-top: 1px solid var(--line-copper); }
.pstage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(44px, 6vw, 96px); }
.pstage + .pstage { border-top: 1px solid var(--line-copper); }
.pstage:nth-child(even) .pstage__media { order: 2; }
.pstage__roman {
  position: absolute; top: -.28em; left: -.04em; z-index: 0;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(9rem, 26vw, 21rem); line-height: .8;
  color: var(--cream); opacity: .045; pointer-events: none;
}
.pstage__media, .pstage__text { position: relative; z-index: 1; }
.pstage__frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-copper-strong); }
.pstage__frame::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line-copper); z-index: 2; pointer-events: none; }
.pstage__frame img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); }
.pstage__text .eyebrow--script { margin-bottom: var(--s2); }
.pstage__text .h2 { margin-bottom: var(--s3); }
.pstage__text p { color: var(--cream-dim); font-family: var(--f-body); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.75; }
.pstage__text p + p { margin-top: var(--s3); }

/* The bespoke path — 5 steps with copper diamond nodes on a connecting line */
.proces-stats { padding-top: 0; }
.pathway { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: clamp(48px, 6vw, 84px); }
.pathway::before { content: ""; position: absolute; top: 23px; left: 9%; right: 9%; height: 1px; background: var(--line-copper); z-index: 0; }
.pathway__step { text-align: center; padding: 0 clamp(8px, 1.4vw, 18px); }
.pathway__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 46px; height: 46px; margin: 0 auto var(--s3);
  border: 1px solid var(--copper); background: var(--charcoal);
  transform: rotate(45deg);
}
.pathway__num b { transform: rotate(-45deg); font-family: var(--f-display); font-weight: 600; color: var(--copper); font-size: 1.05rem; }
.pathway__title { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; color: var(--cream); margin-bottom: .3em; }
.pathway__text { color: var(--cream-dim); font-size: .96rem; line-height: 1.6; }

/* Galerija — masonry (CSS columns), copper frames, category captions */
.mgrid { columns: 3; column-gap: clamp(16px, 2vw, 28px); }
.mgrid__item { break-inside: avoid; margin-bottom: clamp(16px, 2vw, 28px); }
.mgrid__frame { position: relative; overflow: hidden; border: 1px solid var(--line-copper); background: var(--smoke); transition: border-color .5s ease; }
.mgrid__frame img { display: block; width: 100%; height: auto; filter: var(--grade); transition: transform 1s var(--ease-heavy); cursor: zoom-in; }
.mgrid__item:hover .mgrid__frame { border-color: var(--copper); }
.mgrid__item:hover .mgrid__frame img { transform: scale(1.04); }
.mgrid__cap { display: inline-block; margin-top: 10px; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: var(--cream-dim); text-decoration: none; transition: color .3s ease; }
.mgrid__cap:hover { color: var(--copper); }

@media (max-width: 900px) {
  .mgrid { columns: 2; }
}
@media (max-width: 820px) {
  .pstage { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .pstage:nth-child(even) .pstage__media { order: 0; }
  .pstage__roman { font-size: clamp(7rem, 30vw, 12rem); top: -.42em; }
}
@media (max-width: 760px) {
  .pathway { grid-template-columns: 1fr; gap: clamp(18px, 5vw, 30px); max-width: 430px; margin-inline: auto; }
  .pathway::before { display: none; }
  .pathway__step { display: grid; grid-template-columns: 54px 1fr; gap: 16px; text-align: left; align-items: center; padding: 0; }
  .pathway__num { margin: 0; }
}
@media (max-width: 560px) {
  .mgrid { columns: 1; max-width: 460px; margin-inline: auto; }
}